<template>
  <div class="guide-page">
    <el-card>
      <el-button type="primary" @click="addNeList">新建</el-button>
    </el-card>
    <el-card style="margin-top: 20px;">
      <tableData :tableData="data" :tableColumns="docs" :pagination="pagination">
        <el-table-column label="指南类型" align="center">
          <template v-slot="{ row }">
            {{ matterTypeName(row) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button @click="editGuide(row)" type="text" class="mx-2" size="small">修改</el-button>
            <el-button @click="deleteGuide(row)" type="text" class="text-red-400" size="small">删除</el-button>
          </template>
        </el-table-column>
      </tableData>
    </el-card>
    <el-dialog :title="`${showType === 'add' ? '新建' : '修改'}人才政策指南`" :visible.sync="changeShow" width="35%">
      <div class="dialog-flex">
        <el-form :model="formData" label-width="110px" ref="formData">
          <el-form-item label="标题" prop="name" :rules="[
            { required: true, message: '请输入标题', trigger: 'blur' },
          ]">
            <el-input placeholder="请输入标题" style="width: 220px;" v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="政策办理方式" prop="handlingMethod" :rules="[
            { required: true, message: '请选择政策办理方式', trigger: 'blur' },
          ]">
            <el-select v-model="formData.handlingMethod" placeholder="请选择办理类型">
              <el-option :value="1" label="线上办理"></el-option>
              <el-option :value="2" label="线下办理"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人才类型">
            <el-input v-model="formData.categoryName" style="width: 220px;" placeholder="请输入人才类型，例： ABCD"></el-input>
          </el-form-item>
          <el-form-item label="责任主体人" prop="departmentCode" :rules="[
            { required: true, message: '请输入责任主体人', trigger: 'blur' },
          ]">
            <el-select v-model="formData.departmentCode">
              <el-option v-for="(el, index) in departmentList" :key="index" :value="el.departmentCode"
                :label="el.departmentName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="指南类型" v-if="formData.handlingMethod === 1" :rules="[
            { required: true, message: '请选择指南类型', trigger: 'blur' },
          ]">
            <el-select v-model="formData.matterType">
              <el-option v-for="(item, index) in matterType" :label="item.label" :value="item.value" :key="index">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="60px">
            <div class="relative" v-for="(item, index) in formData.contentList" :key="index">
              <div class="relative-card">
                <div class="relative-flex">
                  <div style="width: 60px;">小标题</div>
                  <el-input v-model="item.title" placeholder="请输入小标题"></el-input>
                </div>
                <div class="relative-flex">
                  <div style="width: 60px;">内容</div>
                  <el-input type="textarea" v-model="item.content" placeholder="请输入内容">
                  </el-input>
                </div>
              </div>
              <i class="
                  el-icon
                  el-icon-minus
                  absolute
                " @click="minus(index)"></i>
              <i v-show="index == formData.contentList.length - 1" class="
                  el-icon
                  el-icon-plus
                " @click="formData.contentList.push({ title: '', content: '' })"></i>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="changeShow = false">取 消</el-button>
        <el-button type="primary" @click="confrimFormaData">确 定</el-button>
      </span>
    </el-dialog>
    <!-- tdgrfcvb
    <el-input type="textarea" autosize placeholder="请输入内容" v-model="a">
    </el-input>
    <p
      style="
        text-align: left;
        text-indent: 2em;
        width: 300px;
        word-wrap: break-word;
      "
      v-for="(el, index) in list"
      :key="index"
    >
      {{ el }}
    </p> -->
  </div>
</template>

<script>
// import VueUeditorWrap from "vue-ueditor-wrap";
import tableData from "../../components/Table";
import {
  mattersGuideList,
  mattersDepartmentList,
  mattersGuideAdd,
  mattersGuideUpdate,
  mattersGuideDelete,
  mattersGuideGet,
} from "@/api/policy";
export default {
  name: "guide",
  components: {
    // VueUeditorWrap,
    tableData,
  },
  computed: {
    list() {
      return this.a.split("\n");
    },
  },
  data() {
    return {
      a: "tyui",
      changeShow: false,
      showType: "add",
      formData: {
        categoryName: "",
        contentList: [
          {
            content: "",
            title: "", // 标题
          },
        ],
        departmentCode: null, // 责任主体
        handlingMethod: null,
        matterType: null,
        name: "",
      },
      departmentList: [], // 人才事项部门 责任主体
      matterType: [
        { label: "健康管理", value: 1 },
        { label: "健康体检", value: 2 },
        { label: "高层次人才绿色通道", value: 3 },
        { label: "人才服务惠老关怀申请", value: 4 },
        { label: "人才“镇兴”行动购住房契税补贴申请(住房)", value: 5 },
        { label: "人才“镇兴”行动购住房契税补贴申请(商办)", value: 6 },
      ],
      docs: [
        { label: "指南名称", key: "name" },
        { label: "人才等级", key: "categoryName" },
        { label: "责任主体", key: "departmentName" },
        // { label: "指南类型", key: "matterType" },
      ],
      data: [],
      pagination: {
        currentPage: 1,
        total: 0,
        pageSize: 10,
      },
      paggeinfo: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  watch: {
    changeShow(newVal) {
      if (!newVal) {
        this.formData = {
          categoryName: null, // 责任主体
          contentList: [
            {
              content: null,
              title: "", // 标题
            },
          ],
          departmentCode: null,
          handlingMethod: null,
          matterType: null,
          name: "",
        };
        this.$refs.formData.clearValidate();
      }
    },
    "pagination.currentPage": function (val) {
      this.paggeinfo.pageNum = val;
      this.getMattersGuideList();
    },
  },
  methods: {
    editGuide: async function (row) {
      this.showType = "edit";
      await this.GetmattersGuide(row.id);
      this.formData = JSON.parse(JSON.stringify(this.formData));
      this.changeShow = true;
    },
    deleteGuide(row) {
      this.$alert("是否确定删除？", "删除人才政策指南", {
        confirmButtonText: "确定",
        callback: () => {
          this.deletMattersGuide(row.id);
        },
      });
    },
    addNeList() {
      this.showType = "add";
      this.changeShow = true;
    },
    confrimFormaData() {
      this.$refs.formData.validate((val) => {
        if (val) {
          if (this.showType === "add") {
            this.addMattersGuide();
          } else {
            this.editMattersGuide();
          }
        } else {
          return false;
        }
      });
    },
    // 删除一些小标题
    minus(index) {
      if (this.formData.contentList.length <= 1) {
        return this.$message.warning("最少有一个内容");
      }
      this.formData.contentList.splice(index, 1);
    },
    // 获取人才政策指南列表
    getMattersGuideList() {
      mattersGuideList(JSON.parse(JSON.stringify(this.paggeinfo))).then(
        (res) => {
          this.data = res.data.list;
          this.pagination.total = res.data.total;
          this.changeShow = false;
        }
      );
    },
    // 获取人才事项部门（责任主体人）
    mattersDepartmentList() {
      mattersDepartmentList({ departmentType: 1 }).then((res) => {
        if (res.success) {
          this.departmentList = res.data;
        }
      });
    },
    // 添加人才政策指南
    addMattersGuide() {
      mattersGuideAdd(this.formData).then((res) => {
        if (res.success) return this.getMattersGuideList();
        this.$message.error("添加失败，请重试");
      });
    },
    // 修改人才政策指南
    editMattersGuide() {
      mattersGuideUpdate(this.formData).then((res) => {
        if (!res.success) {
          this.changeShow = false;
          return this.$message.error("修改失败");
        }
        this.changeShow = false;
        this.$message.success("修改成功");
        this.getMattersGuideList();
      });
    },
    // 删除人才政策指南
    deletMattersGuide(id) {
      mattersGuideDelete({ id }).then((res) => {
        if (res.success) {
          this.$message.success("删除人才政策成功");
          if (this.pagination.currentPage == 1)
            return this.getMattersGuideList();
          this.pagination.currentPage = 1;
        } else {
          this.$message.error("删除失败，请重试");
        }
      });
    },
    // 查询人才政策指南详情
    async GetmattersGuide(id) {
      await mattersGuideGet({ id }).then((res) => {
        if (res.success) {
          this.formData = res.data;
        } else {
          this.$message.error("查询，请重试");
        }
      });
    },
    // 表中的指南类型名称
    matterTypeName(row) {
      let Obj = this.matterType.find((el) => row.matterType == el.value);
      if (Obj && Obj.label) return Obj.label;
      return row.name;
    },
    init() {
      this.getMattersGuideList();
      this.mattersDepartmentList();
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="stylus">
.guide-page {
  .el-form-item__content {
    display: flex;
    flex-wrap: wrap;
  }
  .relative{
    display: flex;
    justify-content: space-around;
    align-items: center;
    .relative-card{
      display: flex;
      flex-direction: column;
      .relative-flex{
        display: flex;
        margin-bottom: 20px;
      }
    }
    .el-icon{
      margin-left: 10px;
      cursor: pointer;
    }
    
  }
}
</style>
