<template>
  <div class="app-container">
    <el-form ref="form" label-position="top" :model="form" :rules="rules" label-width="180px">
      <el-form-item label="投诉人姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入投诉人姓名" />
      </el-form-item>
      <el-form-item label="投诉人联系电话" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入投诉人联系电话" />
      </el-form-item>
      <el-form-item label="投诉人身份证号码" prop="cardId">
        <el-input v-model="form.cardId" placeholder="请输入投诉人身份证号码" />
      </el-form-item>
      <el-form-item label="所属项目名称" prop="projectName">
        <el-input v-model="form.projectName" placeholder="请输入所属项目名称" />
      </el-form-item>
      <el-form-item label="总承包单位" prop="deptName">
        <el-input v-model="form.deptName" placeholder="请输入总承包单位" />
      </el-form-item>
      <el-form-item label="劳务单位名称" prop="subDeptName">
        <el-input v-model="form.subDeptName" placeholder="请输入劳务单位名称" />
      </el-form-item>
      <el-form-item label="欠薪人数" prop="number">
        <el-input v-model="form.number" placeholder="请输入欠薪人数" />
      </el-form-item>
      <el-form-item label="欠薪金额" prop="amount">
        <el-input v-model="form.amount" placeholder="请输入欠薪金额" />
      </el-form-item>
      <el-form-item label="拖欠原因说明" prop="remark">
        <el-input type="textarea" rows="3" v-model="form.remark" placeholder="请输入拖欠原因说明" />
      </el-form-item>
      <el-form-item label="凭证附件" prop="files">
        <image-upload v-model="form.files" :limit="9"/>
      </el-form-item>
    </el-form>
    <div style="text-align: center;">
      <el-button round icon="el-icon-finished" type="primary" @click="submitForm" style="width:90%;background-color: #409eff;border-color: #409eff;">确 定 提 交 投 诉</el-button>
    </div>
  </div>
</template>

<script>
import {
  listWxMenConfig,
  getWxMenConfig,
  delWxMenConfig,
  addWxMenConfig,
  updateWxMenConfig,
} from "@/api/wxsetting/wxMenConfig";
import { listRole } from "@/api/system/role";
export default {
  name: "WxMenConfig",
  dicts: ["sys_wechat_menu_type", "sys_common_isdel"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "请选择文件归属", trigger: "blur" }
        ],
        phone:[
         { required: true, message: "请选择子公司", trigger: "blur" }
        ],
        cardId: [
          { required: true, message: "请选择文件归属", trigger: "blur" }
        ],
        projectName:[
         { required: true, message: "请选择子公司", trigger: "blur" }
        ],
        deptName: [
          { required: true, message: "请选择文件归属", trigger: "blur" }
        ],
        subDeptName:[
         { required: true, message: "请选择子公司", trigger: "blur" }
        ],
        number: [
          { required: true, message: "请选择文件归属", trigger: "blur" }
        ],
        amount:[
         { required: true, message: "请选择子公司", trigger: "blur" }
        ],
        remark: [
          { required: true},
          { max: 200,message: "最多输入200字符" }
        ]
      },
    };
  },
  created() {
    //this.getList();
    //this.getRoles();
  },
  methods: {
    /** 查询菜单配置列表 */
    getList() {
      this.loading = true;
      listWxMenConfig(this.queryParams).then((response) => {
        this.wxMenConfigList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 角色列表 */
    getRoles() {
      listRole({ pageNum: 1, pageSize: 100 }).then((response) => {
        this.roles = response.rows;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        menuName: null,
        menuIdenti: null,
        menuImg: null,
        menuUrl: null,
        delFlag: null,
        createTime: null,
      };
      this.surMenuConfigRoleList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加菜单配置";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getWxMenConfig(id).then((response) => {
        this.form = response.data;
        this.surMenuConfigRoleList = response.data.surMenuConfigRoleList;
        this.open = true;
        this.title = "修改菜单配置";
      });
    },
    /** 提交按钮 */
    submitForm() {
        this.$modal.msgWarning("04月20日...敬请期待");
    //   this.$refs["form"].validate((valid) => {
    //     if (valid) {
    //       this.form.surMenuConfigRoleList = this.surMenuConfigRoleList;
    //       if (this.form.id) {
    //         updateWxMenConfig(this.form).then((response) => {
    //           this.$modal.msgSuccess("修改成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       } else {
    //         addWxMenConfig(this.form).then((response) => {
    //           this.$modal.msgSuccess("新增成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       }
    //     }
    //   });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除菜单配置编号为"' + ids + '"的数据项？')
        .then(function () {
          return delWxMenConfig(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 菜单配置角色序号 */
    rowSurMenuConfigRoleIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 菜单配置角色添加按钮操作 */
    handleAddSurMenuConfigRole() {
      let obj = {};
      obj.roleId = "";
      this.surMenuConfigRoleList.push(obj);
    },
    /** 菜单配置角色删除按钮操作 */
    handleDeleteSurMenuConfigRole() {
      if (this.checkedSurMenuConfigRole.length == 0) {
        this.$modal.msgError("请先选择要删除的菜单配置角色数据");
      } else {
        const surMenuConfigRoleList = this.surMenuConfigRoleList;
        const checkedSurMenuConfigRole = this.checkedSurMenuConfigRole;
        this.surMenuConfigRoleList = surMenuConfigRoleList.filter(function (item) {
          return checkedSurMenuConfigRole.indexOf(item.index) == -1;
        });
      }
    },
    /** 复选框选中数据 */
    handleSurMenuConfigRoleSelectionChange(selection) {
      this.checkedSurMenuConfigRole = selection.map((item) => item.index);
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "wxsetting/wxMenConfig/export",
        {
          ...this.queryParams,
        },
        `wxMenConfig_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
