<template>
  <el-dialog
    title="生成委托"
    v-model="formOpen"
    width="900px"
    append-to-body
    draggable
    @close="cancel"
    :close-on-click-modal = "false"
  >
    <el-form ref="dictRef" :model="form" label-width="100">
      <el-form-item label="起始月：">
        <el-date-picker
          v-model="startMonth"
          size="small"
          placeholder="起始月"
          :clearable="true"
          value-format="YYYY-MM-DD"
          format="YYYY年MM月"
          type="month"
        />
      </el-form-item>
      <el-form-item label="服务项目：">
        <el-checkbox-group
          v-model="loops"
          @change="(arg) => changeDetails(arg)"
        >
          <el-checkbox
            v-for="(item, index) in loopTasks"
            :key="index"
            :label="item.id"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="委托客户：">
        <el-table
          :data="list"
          size="small"
          border
          height="100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            label="客户名称"
            align="center"
            min-width="250"
            prop="name"
          />
          <el-table-column
            label="税号"
            align="center"
            prop="socialCreditCode"
            min-width="180"
          />
          <el-table-column label="操作" align="center" width="50">
            <template #default="scope">
              <el-button
                type="danger"
                size="small"
                link
                @click="delWorkOrderHandler(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          icon="Finished"
          size="small"
          @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel" icon="close" size="small">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    title="客户信息编辑"
    v-model="visible"
    :width="500"
    append-to-body
    draggable
    @close="closeIsZero"
  >
    <!-- 功能按钮 -->
    <div style="padding: 8px 24px 16px 24px">
      <el-form size="small" label-width="100px" v-model="form">
        <el-form-item label="是否零申报">
          <el-select
            v-model="form.isZero"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in yesOrNo"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="form-btns-container" style="height: 40px">
      <el-button
        size="small"
        style="float: right"
        @click="closeIsZero"
        icon="close"
      >
        取消</el-button
      >
      <el-button
        type="primary"
        icon="Finished"
        size="small"
        style="float: right; margin-left: 12px; margin-right: 12px"
        @click="handleSave"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>
<script setup>
import {
  addEntrust,
  getFactories,
} from "@/api/business/entrust/currentWorkOrder";
import { initTaskTypes } from "@/api/business/crm/contract";
import { ref } from "vue";

import { setLoopEntrust } from "@/api/business/standardCompany";
import { set } from "@vueuse/core";
import { yesOrNo } from "@/utils/default";

const { proxy } = getCurrentInstance();

const visible = ref(false);
const loopTasks = ref([]);
const factories = ref([]);
const emit = defineEmits(["choice"]);
const loops = ref([]);

const list = ref([]);

const props = defineProps({
  getList: {
    type: Function,
    default: () => {},
  },
});

const { getList } = toRefs(props);
const startMonth = ref(proxy.moment().format("YYYY-MM-01"));

const formOpen = ref(false);
const form = ref({});
const rules = ref({});
const content = ref("请输入员工姓名");
const ids = ref([]);

function submitForm() {
  console.log(loops.value);
  let type = loops.value.findIndex((v) => v == 1);
  form.value.taskTypeIds = loops.value;
  form.value.companies = list.value;
  form.value.startMonth = startMonth.value;
  if (loops.value.length == 0) {
    proxy.$modal.msgError("请选择服务项目");
  } else if (type > -1) {
    visible.value = true;
  } else {
    setLoopEntrust(form.value).then((response) => {
      proxy.$modal.msgSuccess("保存成功!");
      formOpen.value = false;
      getList.value();
    });
  }
}

function closeIsZero() {
  form.value.isZero = null;
  visible.value = false;
}

function handleSave() {
  console.log(form.value.isZero);
  if (form.value.isZero == null) {
    proxy.$modal.msgError("请选择是否零申报!");
  } else {
    setLoopEntrust(form.value).then((response) => {
      proxy.$modal.msgSuccess("保存成功!");
      visible.value = false;
      formOpen.value = false;
      getList.value();
    });
  }
}

function cancel() {
  formOpen.value = false;
  reset();
}

function open(options) {
  const { selections } = options;
  initTaskTypes().then((res) => {
    loopTasks.value = res.data.loopTasks;
  });
  list.value = proxy.deepClone(selections);
  formOpen.value = true;
}

function delWorkOrderHandler(index) {
  proxy.$modal.confirm("是否确认删除选中的数据项？").then(() => {
    list.value.splice(index, 1);
  });
}

function reset() {
  list.value = [];
  startMonth.value = proxy.moment().format("YYYY-MM-01");
  form.value = {};
}

function changeDetails(type, arg) {}

function initFactories() {
  getFactories().then((res) => {
    factories.value = res.data;
  });
}
initFactories();
// 暴露给父组件的方法
defineExpose({
  open,
  cancel,
});
</script>