<script name="exportFieldDialog" setup>
import { ref, watch } from 'vue'
const
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    }
  }),
  emits = defineEmits(['close', 'exportProject']),
  formRef = ref(),
  form = ref({}),
  exportFieldsOptions = ref({
    'id': '项目ID',
    'projectName': '项目名称',
    'areaCode': '行政区划编码',
    'area': '行政区划名称',
    'responsibleMan': '项目负责人',
    'responsibleManMobile': '项目负责人手机号',
    'contactName': '项目联系人',
    'contactPhone': '项目联系人手机号',
    'higherSuperOrg': '上级业务主管单位',
    'higherSuperOrgCode': '上级业务主管单位浙政钉ID',
    'superOrg': '本级主管部门',
    'superOrgCode': '本级主管部门浙政钉ID',
    'buildOrgName': '建设单位',
    'buildOrgZheJiangGovDingId': '建设单位浙政钉ID',
    'orgCreditCode': '建设单位统一信用代码',
    'projectType': '项目类型',
    'isFirst': '是否首次新建',
    'relatedExistsApplication': '关联应用',
    'relatedExistsApplicationCode': '关联应用IRS编码',
    'declareAmount': '申报金额',
    'approvedTotalInvestmentIncrease': '批复金额',
    'budgetSource': '预算来源',
    'projectYear': '预算年度',
    'projectIntroduction': '项目简介',
    'buildBasis': '立项依据',
    'buildLevel': '建设层级',
    'developCode': '发改编码',
    'financialCode': '财政编码',
    'informationValidity': '信息是否有效',
    'isDigitalReform': '是否数字化改革项目',
    'bizDomain': '综合应用领域',
    'isCloud': '是否上云',
    'cloudType': '云类型',
    'fourSystems': '四大体系',
    'isTemporaryAugment': '是否临时增补',
    'protectionLevel': '等保级别',
    'isSecretComments': '是否密评',
    'businessNumber': '业务编号',
    'businessName': '业务名称',
    'orgName': '单位名称',
    'softwareDevelopmentAmount': '软件开发',
    'cloudHardwarePurchaseAmount': '云资源、硬件购置',
    'thirdPartyAmount': '第三方服务',
    'safetyInputTitle': '投入项',
    'safetyInputDescribe': '内容描述',
    'safetyInputAmount': '金额',
    'annualPlanAmount': '年度支付金额',
    'annualPlanHaveAmount': '自有资金',
    'declareGovOwnFinanceAmount': '政府投资-本级财政资金',
    'declareGovSuperiorFinanceAmount': '政府投资-上级补助资金',
    'declareBankLendingAmount': '银行贷款',
    'declareOtherAmount': '其他资金',
    'engineeringSpeedOne': '第一季度',
    'engineeringSpeedTwo': '第二季度',
    'engineeringSpeedThree': '第三季度',
    'engineeringSpeedFour': '第四季度',
    'preliminaryPlanFile': '初步方案',
    'supportingMaterialsFile': '佐证材料',
    'projectRemarks': '备注'
  }),
  checkAll = ref(false),
  isIndeterminate = ref(false),
  handleCheckAllChange = (val) => {
    form.value.exportFields = val ? Object.keys(exportFieldsOptions.value) : []
    isIndeterminate.value = false
  },
  handleCheckedCitiesChange = (value) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === Object.entries(exportFieldsOptions.value).length
    isIndeterminate.value = checkedCount > 0 && checkedCount < Object.entries(exportFieldsOptions.value).length
  },
  rules = {
    exportFields: [{ required: true, message: '请选择导出字段', trigger: 'blur' }]
  },
  submit = async formEl => {
    if (!formEl) {
      return
    }
    await formEl.validate(async valid => {
      if (valid) {
        emits('exportProject', form.value.exportFields)
      }
    })
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      console.log(val)
    } else {
      formRef.value.resetFields()
      checkAll.value = false
      isIndeterminate.value = false
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="导出"
    width="80%"
    destroy-on-close
    @close="emits('close')"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="120px"
      label-suffix=":"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="导出字段" prop="exportFields">
            <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
            >全选</el-checkbox>
            <el-checkbox-group
              v-model="form.exportFields"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                v-for="(value,key) in exportFieldsOptions"
                :key="key"
                :label="key"
                style="width: 180px"
              >{{ value }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit(formRef)">
        提交
      </el-button>
      <el-button @click="emits('close')">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>
