<template>
  <div class="addType-dialog">
    <a-modal
      class="edit-dialog"
      v-model:visible="props.edditTypeVisible"
      :destroyOnClose="true"
      @cancel="handleOk">
      <template #title> <div class="title">修改审批类型</div></template>
      <template #closeIcon>
        <img src="@/assets/image/approval/close.png"
      /></template>
      <div class="header">
        <div class="tiao"></div>
        <span class="word">基础修改</span>
      </div>
      <a-form
        :model="form"
        ref="typeForm">
        <a-form-item
          label="原审批名称"
          name="oldName">
          {{ detailData.data.Title }}
        </a-form-item>
        <a-form-item
          label="新名称"
          name="title"
          :rules="[
            {
              required: true,
              trigger: 'blur',
              message: '请填写审批名称',
            },
          ]">
          <a-input
            class="count-input"
            v-model:value="form.title"
            placeholder="请填写审批名称" />
        </a-form-item>
        <a-form-item
          label="原内容说明"
          name="oldTxt">
          {{ detailData.data.Remark }}
        </a-form-item>
        <a-form-item
          :colon="false"
          label="申请内容说明"
          name="Remark">
          <a-textarea
            class="textarea"
            v-model:value="form.Remark"
            placeholder="在此输入具体内容"
            :rows="4" />
        </a-form-item>
        <a-table
          :dataSource="state.tableData"
          :columns="state.columns"
          :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'ApprovalName'">
              <div>
                <a-input
                  v-model:value="record.ApprovalName"
                  placeholder="请输入标题"
                  style="width: 100%" />
              </div>
            </template>
            <template v-if="column.key === 'ApprovalType'">
              <a-select
              ref="exSelect"
              v-model:value="record.ApprovalType"
              style="width: 190px"
              option-label-prop="label"
              :options="state.typeList">
            </a-select>
            </template>
            <template v-if="column.key === 'placeholder'">
              <div>
                <a-input
                  v-model:value="record.ApprovalPlaceholder"
                  v-show="
                    record.ApprovalType === 'string' ||
                    record.ApprovalType === 'date'
                  "
                  placeholder="请输入提示词"
                  style="width: 100%" />
              </div>
            </template>
            <template v-else-if="column.key === 'extra'">
              <div>
                <a-checkbox
                  v-model:checked="record.ApprovalMark"
                  style="margin-left: 10px"
                  v-show="
                    record.ApprovalType === 'string' ||
                    record.ApprovalType === 'date'
                  "
                  >摘要</a-checkbox
                >
                <a-checkbox
                  v-model:checked="record.ApprovalRequired"
                  style="margin-left: 10px"
                  v-show="
                    record.ApprovalType === 'string' ||
                    record.ApprovalType === 'date' 
                  "
                  >必填</a-checkbox
                >
              </div>
            </template>
          </template></a-table
        >
      </a-form>
      <template #footer>
        <div class="button-group">
          <!-- <a-button @click="del" style="background: #e35c5cff" class="save-btn">删除 </a-button> -->
          <a-button
            @click="handleOk"
            class="cancel-btn"
            >取消
          </a-button>
          <a-button
            @click="save"
            class="save-btn"
            >完成修改</a-button
          >
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  onMounted,
  defineProps,
  defineEmits,
  getCurrentInstance,
  nextTick,
} from "vue";
import {
  processError,
  processSuccess,
  processWarning,
} from "@/utils/helper/message";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
const props = defineProps({
  // 抄送人弹窗显示
  edditTypeVisible: {
    type: Boolean,
    default: false,
  },
  selectedRowKeys: {
    type: Array,
    default: [],
  },
  // 是否是体制外
  isOut: {
    type: Boolean,
    default: false,
  },
});
const typeForm = ref();
// 表单数据
const form = reactive({
  Remark: "",
  title: "",
  ID: null,
});
const state = reactive({
  // 自定义类型
  typeList: [
    {
      label: "文本",
      value: "string",
    },

    {
      label: "日期",
      value: "date",
    },
    {
      label: "文件",
      value: "upload",
    },
    {
      label: "画作列表",
      value: "artworkList",
    },
  ],
  // 表格数据
  tableData: [],
  // 表格列
  columns: [
    {
      title: "类型名称",
      dataIndex: "ApprovalName",
      key: "ApprovalName",
      width: 200,
    },
    {
      title: "自定义类型",
      dataIndex: "ApprovalType",
      key: "ApprovalType",
      width: 200,
    },
    {
      title: "自定义提示词",
      dataIndex: "placeholder",
      key: "placeholder",
      width: 200,
    },
    {
      title: "额外选项",
      dataIndex: "extra",
      key: "extra",
      width: 300,
    },
  ],
  // 类型
  typeMap: {
    string: "文本",
    date: "日期",
    upload: "附件",
    artworkList: "画作列表",
  },
});
const detailData = reactive({ data: {} });
const emit = defineEmits("editTypeHandleOk");

// 重置
const reset = () => {
  typeForm.value.resetFields();
};
// 详情
const getDetail = () => {
  let params = { ID: props.selectedRowKeys[0] || "" };
  $request.HTTP.approval
    .getApprovalTypeDetail(params)
    .then((res) => {
      if (res.status === 0) {
        detailData.data = res.data;
        state.tableData = res.data.KeyInfos;
      }
    })
    .catch((e) => {});
};
// 删除
const del = () => {
  $request.HTTP.approval
    .deleteApprovalType({
      IDs: [props.selectedRowKeys[0]] || [],
    })
    .then((res) => {
      if (res.status === 0) {
        processSuccess("删除成功");
        emit("editTypeHandleOk");
        reset();
      } else {
        processError("删除失败");
      }
    })
    .catch((e) => {
      processError("删除失败");
    });
};
// 保存
const save = () => {
  form.ID = props.selectedRowKeys[0];
  form.KeyInfos = state.tableData;
  if (props.isOut) {
    form.Domain = "out";
  }
  typeForm.value
    .validate()
    .then(() => {
      $request.HTTP.approval
        .editApprovalType(form)
        .then((res) => {
          if (res.status === 0) {
            processSuccess("修改成功");
            emit("editTypeHandleOk");
            reset();
          } else {
            processError("修改失败");
          }
        })
        .catch((e) => {
          processError("修改失败");
        });
    })
    .catch((error) => {});
};
// 关闭回调
const handleOk = (e) => {
  emit("editTypeHandleOk");
};

watch(
  () => props.edditTypeVisible,
  (newValue, oldValue) => {
    if (newValue) {
      getDetail();
    }
  }
);
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  margin: 0;
  color: $theme-primary;
}
.header {
  align-items: center;
  display: flex;
  margin-bottom: 20px;
  .tiao {
    display: inline-block;
    height: 23px;
    width: 3px;
    background: $theme-primary;
  }
  .word {
    color: $theme-primary;
    font-size: 23px;
    margin-left: 10px;
  }
}
.count-input {
  margin-left: 16px;
  width: 370px;
  background-color: #e3dfea;
}
.textarea {
  width: 370px;
  background-color: #e3dfea;
}
textarea::-webkit-input-placeholder {
}
:deep(.ant-form-item-label > label) {
  font-size: 16px;
  color: $theme-primary;
}
:deep(.ant-form-item-control) {
  font-size: 16px;
  color: $theme-primary;
}
:deep(.ant-select-selector) {
  background-color: #e3dfea !important;
}
.ant-select-arrow .anticon {
  color: $theme-primary;
}
.copy-box {
  margin-bottom: 20px;
}
.button-group {
  text-align: center;

  .cancel-btn {
    width: 123px;
    border-radius: 20px;
    background: #eeeaf7;
    margin-right: 10px;
    color: $theme-primary;
  }
  .save-btn {
    width: 123px;
    border-radius: 20px;
    background: $theme-primary;
    color: #ffff;
  }
}
</style>
<style lang="scss">
.edit-dialog {
  width: 700px !important;
  .ant-modal-body {
    height: 650px !important;
    overflow-y: scroll;
  }
}
</style>
