<template>
  <div>
    <el-dialog title="申请资料设置" v-model="dialogVisible">
      <el-form label-width="auto">
        <el-text tag="b">类别名称：{{ state.detail.name }}</el-text>
        <el-form-item class="mt-4" label="需要的申请资料">
          <el-select
            v-model="state.selectValues"
            placeholder="请选择要添加的资料"
            filterable
            clearable
            multiple
          >
            <el-option
              v-for="item in state.list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-button type="primary" plain class="ml-2" @click="handleAdd"
            >确认</el-button
          >
          <el-button type="primary" plain class="ml-2" @click="handleSubmit"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
      <el-divider />

      <el-table :data="state.profileTable">
        <el-table-column label="资料名称" prop="name" width="">
          <template #default="{ row, $index }">
            <el-input
              v-if="$index > 2"
              clearable
              v-model="row.name"
              @blur="handleEdit(row)"
            ></el-input>
            <el-text v-else>{{ row.name }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="资料类型" prop="type" width="">
          <template #default="{ row, index }">
            {{ typeList[row.setting.type].k }}
          </template>
        </el-table-column>
        <el-table-column label="填写说明（选填）" prop="description" width="">
          <template #default="{ row, index }">
            <el-input
              clearable
              v-model="row.setting.description"
              placeholder="输入填写说明展示在前端"
              @blur="handleEdit(row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="申请页面展示排序" prop="sort" width="">
          <template #default="{ row, index }">
            <el-input
              clearable
              v-model="row.setting.sort"
              @blur="handleEdit(row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="是否必填" prop="required" width="">
          <template #default="{ row, $index }">
            <el-switch
              @change="handleEdit(row)"
              v-model="row.setting.required"
              :disabled="defaultData.includes(row.name)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row, $index }">
            <el-popconfirm
              title="确定删除吗？"
              confirmButtonText="确定"
              cancelButtonText="取消"
              @confirm="handleDelete(row.id, $index)"
            >
              <template #reference>
                <el-button
                  link
                  type="danger"
                  v-if="!defaultData.includes(row.name)"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  id: {
    type: Number
  }
});
const emits = defineEmits(["update:show"]);

const typeList = [
  {
    k: "文本",
    v: 0
  },
  {
    k: "图片",
    v: 1
  },
  {
    k: "文档",
    v: 2
  }
];
const defaultData = ["服务商名称", "负责人姓名", "负责人手机号"];
const state = reactive({
  detail: "",
  profileTable: [],
  list: [],
  mirrorList: [],
  selectValues: []
});
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      init();
    } else {
    }
  }
);

const getDetail = () => {
  request
    .get(`/articleService/serviceProvider/serveCategory?id=${props.id}`)
    .then(resp => {
      state.detail = resp.data;
      state.profileTable = resp.data.setting?.map(v => {
        return {
          name: v.name,
          id: v.id,
          setting: {
            ...v
          }
        };
      });
    });
};

const getList = () => {
  request.get("/articleService/serviceProvider/applyInfos").then(resp => {
    state.list = resp.data;
    state.mirrorList = [...resp.data];
  });
};
const handleAdd = () => {
  if (!state.selectValues.length) return;
  let list = state.list.filter(v => state.selectValues.includes(v.id));
  state.profileTable = [...state.profileTable, ...list];
  state.list = state.list.filter(v => !state.selectValues.includes(v.id));
  state.selectValues = [];
};

const handleSubmit = () => {
  request
    .post("/articleService/serviceProvider/serveCategory/update", {
      id: props.id,
      name: state.detail.name,
      setting: state.profileTable.map(v => {
        return {
          id: v.id,
          name: v.name,
          ...v.setting
        };
      })
    })
    .then(resp => {
      ElMessage.success(resp.message);
    });
};

const handleEdit = row => {
  row.setting.sort = Number(row.setting?.sort);
  request
    .post("/articleService/serviceProvider/applyInfo/update", row)
    .then(resp => {
      ElMessage.success(resp.message);
      getList();
    });
};

const handleDelete = (id, index) => {
  state.selectValues.splice(index, 1);

  state.profileTable.splice(index, 1);

  let find = state.mirrorList.find(v => v.id == id);
  state.list.push(find);
};

const init = () => {
  state.profileTable = [];
  getList();
  getDetail();
};
</script>
