<template>
  <div class="app-container">
    <div shadow="always" style="width: 55%">
      <el-form
          disabled
          ref="formRef"
          :model="form"
          :rules="rules"
          :label-width="labelWidth + 'px'"
      >
        <p><b>基本信息</b></p>

        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="需求名称:" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->

        <el-row>
          <el-col :span="24">
            <el-form-item label="需求类别:">
              <el-checkbox-group v-model="form.kinds">
                <el-checkbox
                    v-for="item in checkList"
                    :key="item.id"
                    :label="item.name"
                >{{ item.name }}
                </el-checkbox
                >
                <!-- <el-checkbox label="0" @change="handleCheck">其他</el-checkbox> -->
              </el-checkbox-group>
              <el-row :gutter="20">
                <el-col :span="20">
                  <el-input
                      v-model="checkInput"
                      placeholder="请输入需求类别"
                  ></el-input>
                </el-col>
                <el-col :span="4">
                  <el-button type="primary" @click="addCheck">添加</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="需求描述:" prop="description">
              <!-- <Editor v-model="form.description" :minHeight="150" /> -->
              <wangEditor
                  readOnly
                  v-model="form.description"
                  width="100%"
                  min-height="150px"
              ></wangEditor>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <CityOptions
          disabled
          v-model="form"
          :labelWidth="labelWidth"
          ref="cityFormRef"
        /> -->

        <el-row>
          <el-col :span="12">
            <el-form-item label="需求联系人:" prop="name">
              <el-input
                  v-model="form.name"
                  placeholder="请输入需求联系人"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人手机号:" prop="mobile">
              <el-input
                  v-model="form.mobile"
                  placeholder="请输入联系人手机号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 
          <el-row>
            <el-col :span="12">
              <el-form-item label="需求提交人:" prop="commitUserName">
                <el-input
                  v-model="form.commitUserName"
                  placeholder="请输入需求提交人"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="需求提交人手机号:" prop="commitPhone">
                <el-input
                  v-model="form.commitPhone"
                  placeholder="需求提交人手机号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
      </el-form>
    </div>
    <div :style="{ marginLeft: labelWidth + 'px' }">
      <el-button @click="submitForm('2')">审核拒绝</el-button>
      <el-button type="primary" @click="submitForm('1')">通过审核</el-button>
    </div>
  </div>
</template>
<script setup name="ServiceDemandApproval">
import {
  batchCasDemand,
  getCasDemandInfo,
  updateCasDemand,
} from "@/api/dataApproval/enterpriseServiceDemand";
import {uniqueId} from "lodash";
// import CityOptions from "@/views/components/CityOptions";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import {demandCategoryList} from "@/utils/parameter";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const data = reactive({
  form: {
    check: [],
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    postCode: undefined,
  },
  rules: {
    title: [{required: true, message: "需求名称不能为空", trigger: "blur"}],
    description: [
      {required: true, message: "需求描述不能为空", trigger: "blur"},
    ],
    name: [{required: true, message: "需求联系人不能为空", trigger: "blur"}],
    mobile: [
      {required: true, message: "联系人手机号不能为空", trigger: "blur"},
    ],
    username: [
      {required: true, message: "需求提交人不能为空", trigger: "blur"},
    ],
    userPhone: [{required: true, message: "手机号不能为空", trigger: "blur"}],
  },
});

const {form, rules} = toRefs(data);

const labelWidth = 140;
const checkList = reactive(demandCategoryList);
const checkInput = ref("");
const cityFormRef = ref();
const formRef = ref();

const submitForm = async (status) => {
  await batchCasDemand(route.query.id, status);
  let successMessage;
  switch (status) {
    case "1":
      successMessage = "已通过";
      break;
    case "2":
      successMessage = "已驳回";
  }
  userStore.getUnApprovedService();
  ElMessage.success(successMessage);
  router.back();
};

// 添加需求类别时验证
function addCheck() {
  if (!checkInput.value.trim().length) return ElMessage.error("请输入");
  const flag = checkList.some((item) => {
    return item.name.trim() == checkInput.value.trim();
  });
  if (!flag) {
    checkList.push({
      id: checkList.length + 1,
      name: checkInput.value,
    });
    checkInput.value = "";
  }
}

if (route.query.id) {
  getCasDemandInfo(route.query.id).then((resp) => {
    form.value = resp.data;
    // checkList
    for (const item of resp.data.kinds) {
      if (!checkList.find((el) => el.name === item)) {
        checkList.push({id: uniqueId("unq-"), name: item});
      }
    }
  });
}
</script>
