<template>
  <div class="coldfood">
    <div class="search-wrapper">
      <el-form
        :inline="true"
        :model="searchForm"
        class="search_form"
        style="text-align: left; margin-bottom: 10px"
      >
        <el-form-item label="姓名" label-width="200">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入姓名"
            @keyup.enter.native="onSubmit"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            v-model="searchForm.phone"
            placeholder="请输入手机号码"
            @keyup.enter.native="onSubmit"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="居住地址">
          <el-select
            v-model="searchForm.areaCode"
            clearable
            placeholder="请输入居住地址"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态码">
          <el-select
            v-model="searchForm.stateCode"
            clearable
            placeholder="请输入状态码"
          >
            <el-option
              v-for="item in reviewStateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="table-wrapper1">
      <table-template
        :tableData="tableData"
        :tableColumns="tableColumns"
        :loading="loading"
        :pagination="pagination"
        @Jump="jumpPage"
      >
        <template #state>
          <el-table-column label="状态描述">
            <template slot-scope="scope">
              <el-tag :type="scope.row.stateCode=='0'? '':scope.row.stateCode=='002'? 'danger': 'success'">{{ scope.row.state }}</el-tag>
            </template>
          </el-table-column>
        </template>
        <el-table-column fixed="right" label="操作" width="380" align="left">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" round @click="view(scope.row)"
              >查看</el-button
            >
            <el-button
              type="warning"
              size="mini"
              round
              @click="getRecord(scope.row)"
              >记录</el-button
            >
            <el-button
              v-if="scope.row.stateCode == '0'"
              type="success"
              size="mini"
              round
              @click="auditHandle(scope.row, '0')"
              >通过</el-button
            >
            <el-button
              type="danger"
              size="mini"
              round
              v-if="scope.row.stateCode == '0'"
              @click="auditHandle(scope.row, '1')"
              >拒绝</el-button
            >

            <!-- 公示期的单子可以暂停公示 -->
            <!-- <el-button
              v-if="scope.row.state === 2"
              type="warning"
              size="mini"
              round
              @click="pause(scope.row.talentCode)"
              >暂停公示</el-button
            > -->
            <!-- 暂停公示的单子可以恢复公示 -->
            <!-- <el-button
              v-if="scope.row.state === 4"
              type="success"
              size="mini"
              round
              @click="recover(scope.row.talentCode)"
              >恢复公示</el-button
            > -->
            <!-- 审核通过后的单子都可以拉入黑名单撤销 -->
            <!-- <el-button
              v-if="
                scope.row.state === 2 ||
                scope.row.state === 3 ||
                scope.row.state === 4
              "
              type="danger"
              size="mini"
              round
              @click="blacklist(scope.row.talentCode)"
              >撤销</el-button
            > -->
            <!-- 审核通过后的单子都可以打印-->
            <!-- <el-button
              size="mini"
              round
              @click="print(scope.row.talentCode, scope.row)"
              >打印</el-button
            > -->
          </template>
        </el-table-column>
      </table-template>
    </div>
    <!-- 表格end -->

    <!-- 拒绝对话框 -->
    <el-dialog
      title="审核"
      :visible.sync="auditDialog"
      width="30%"
      class="auditDialog"
      :before-close="cancelBtn"
    >
      <!-- 通过0  拒绝1 -->
      <div v-if="flag == 1">
        <span>确定拒绝该家庭码的申请吗？确定的话请输入拒绝原因</span>
        <div style="margin-top: 15px">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="请输入拒绝原因"
            v-model="auditData.record"
          >
          </el-input>
        </div>
      </div>

      <div v-else>
        <span
          >确定通过该家庭码的申请吗？确定的话请<span style="color: red"
            >选择通过状态</span
          >和输入说明</span
        >
        <el-form :model="auditData" label-width="80px" ref="form">
          <el-form-item label="状态码">
            <el-select
              v-model="auditData.stateCode"
              placeholder="请选择通过状态"
            >
              <el-option
                v-for="item in passOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="说明" prop="record">
            <el-input
              type="textarea"
              placeholder="请输入说明"
              v-model="auditData.record"
              :autosize="{ minRows: 4, maxRows: 4 }"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="confirmBtn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 人才详情的对话框 -->
    <el-dialog
      title="家庭详情"
      :visible.sync="viewShow"
      width="800px"
      :close-on-press-escape="false"
      @close="showEdu = false"
    >
      <div class="content">
        <!-- 开始 -->
        <div style="background: #f3f4f6">
          <div class="cell">
            <p class="label">家庭码</p>
            <p class="value">{{ viewDetail.familyCode }}</p>
          </div>
          <div class="cell">
            <p class="label">姓名</p>
            <p class="value">{{ viewDetail.name }}</p>
          </div>
          <div class="cell">
            <p class="label">uid</p>
            <p class="value">{{ viewDetail.userId }}</p>
          </div>
          <div class="cell">
            <p class="label">证件</p>
            <p class="value">{{ viewDetail.idCard }}</p>
          </div>
          <div class="cell">
            <p class="label">户籍</p>
            <p class="value">{{ viewDetail.domicile }}</p>
          </div>
          <div class="cell">
            <p class="label">现居市区</p>
            <p class="value">{{ viewDetail.area }}</p>
          </div>
          <div class="cell">
            <p class="label">市区码</p>
            <p class="value">{{ viewDetail.areaCode }}</p>
          </div>
          <div class="cell">
            <p class="label">电话</p>
            <p class="value">{{ viewDetail.phone }}</p>
          </div>
          <div class="cell">
            <p class="label">工作单位</p>
            <p class="value">{{ viewDetail.workUnit }}</p>
          </div>
          <div class="cell">
            <p class="label">婚姻状况</p>
            <p class="value">{{ viewDetail.marriageState }}</p>
          </div>
          <div class="cell">
            <p class="label">婚姻状况编码</p>
            <p class="value">{{ viewDetail.marriageCode }}</p>
          </div>
          <div class="cell">
            <p class="label">结婚日期</p>
            <p class="value">{{ viewDetail.weddingDate }}</p>
          </div>
          <div class="cell">
            <p class="label">是否有孩子</p>
            <p class="value">{{ viewDetail.haveChildren }}</p>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- 申请的单子有通过拒绝-->
        <!-- <el-button type="danger" size="mini" round @click="deny(viewRow)"
          >拒绝
        </el-button> -->
        <!-- 通过 -->
        <!-- <el-button type="success" size="mini" round @click="pass(viewRow)"
          >通过
        </el-button> -->
      </span>
    </el-dialog>
    <el-dialog
      title="操作记录"
      :visible.sync="recordShow"
      width="800px"
      :close-on-press-escape="false"
    >
      <div class="content">
        <template v-if="record && record.length > 0">
          <div class="cell" :key="index" v-for="(item, index) in record">
            <p class="label" style="margin-right: 20px">
              {{ item?.state }}
              <span v-if="item?.record">({{ item?.record }})</span>
            </p>
            <div class="info">
              <p class="item">操作人：{{ item?.departName }}</p>
              <p class="item">操作时间：{{ item?.createTime }}</p>
            </div>
          </div>
        </template>
        <p v-else>暂无记录~</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableTemplate from "@/components/Table";
// import { changeList } from '@/utils';
import {
  getList,
  get,
  getRecord,
  getType,
  getReviewState,
  familyAudit,
} from "@/api/talents";
// import { Message } from "element-ui";

export default {
  components: { TableTemplate },
  data() {
    return {
      auditDialog: false,
      refuseValue: "",
      refuseTextarea: null,
      refuseCode: "",

      // 居住地址
      options: [],
      // 状态吗
      reviewStateOptions: [],
      branchCode: "", // 管理后台给的code
      code: "",
      userName: "",
      searchForm: {
        name: "", // 姓名
        phone: "", // 联系方式
        areaCode: "", // 居住地址
        stateCode: "", // 状态
      },
      loading: false,

      // 审核状态
      auditData: {
        state: "",
        stateCode: "",
        record: "", //评语
        departName: "卫健委",
        familyCode: "",
      },
      // 人才类型
      tableData: [],
      tableColumns: [
        {
          key: "familyCode",
          label: "家庭码",
          width: 250,
        },
        {
          key: "area",
          label: "居住地址",
          width: 250,
        },

        {
          key: "haveChildren",
          label: "是否有孩子",
          width: 250,
        },
        {
          key: "idCard",
          label: "证件",
          width: 250,
        },
        {
          key: "marriageState",
          label: "婚姻状况",
          width: 250,
        },
        {
          key: "name",
          label: "姓名",
          width: 250,
        },
        {
          key: "phone",
          label: "手机号",
          width: 250,
        },
        {
          key: "state",
          label: "状态描述",
          width: 250,
          type: "slot",
        },

        {
          key: "workUnit",
          label: "工作单位",
          width: 250,
        },
      ],
      pagination: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      viewShow: false,
      viewDetail: {},
      record: [],
      recordShow: false,
      showEdu: false,
      eduList: [],
      // 查看对话框当前row
      viewRow: {},
      flag: 0,
      passOptions: [], //审核通过的状态
    };
  },
  watch: {
    $route() {
      //   if (this.$route) {
      //     this.userName = localStorage.getItem('userName');
      //     this.branchCode = this.$route.query.branchCode
      //       ? this.$route.query.branchCode
      //       : '';
      //     this.code = this.$route.query.code ? this.$route.query.code : '';
      //     this.searchForm.name = '';
      //     this.searchForm.phone = '';
      //     this.searchForm.typeCode = '';
      //     this.searchForm.state = '';
      //     this.searchForm.recordName = '';
      //     this.searchForm.unitName = '';
      //     this.init();
      //     this.initType();
      //     if (!this.branchCode) {
      //       this.initBranch();
      //     }
      //   }
      // },
    },
  },
  methods: {
    switechBranch(branchCode) {
      switch (branchCode) {
        case "5":
          return "镇江市区";
        case "17":
          return "丹阳市";
        case "18":
          return "句容市";
        case "19":
          return "扬中市";
      }
    },
    init() {
      this.tableData = [];
      this.loading = true;
      let params = {
        areaCode: this.searchForm.areaCode,
        name: this.searchForm.name,
        phone: this.searchForm.phone,
        stateCode: this.searchForm.stateCode,
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
      };
      getList(params).then((res) => {
        this.loading = false;
        if (res.success) {
          console.log(res);
          this.pagination.total = res.data.total;
          if (res.data.total) {
            this.tableData = res.data.list;
          } else {
            this.tableData = [];
          }
        }
      });
    },
    initType() {
      getType().then((res) => {
        this.options = res.data.map((item) => {
          return {
            label: item.name,
            value: item.code,
          };
        });
      });
    },

    initReviewState() {
      getReviewState(0).then((res) => {
        this.reviewStateOptions = res.data.map((item) => {
          return {
            label: item.state,
            value: item.code,
          };
        });
      });
      getReviewState(1).then((res) => {
        let arr = [];
        res.data.forEach((item) => {
          if (item.state != "不符合") {
            arr.push({
              label: item.state,
              value: item.code,
            });
          }
        });
        this.passOptions = arr;
        console.log(this.passOptions, "pass");
      });
    },

    jumpPage() {
      this.init();
    },
    onSubmit() {
      this.pagination.currentPage = 1;
      this.init();
    },
    view(row) {
      let params = {
        code: row.familyCode,
      };
      get(params).then((res) => {
        this.viewDetail = res.data;
        this.viewRow = row;
        this.viewShow = true;
      });
    },
    getRecord(row) {
      let params = {
        code: row.familyCode,
      };
      getRecord(params).then((res) => {
        this.record = res.data.data.data;
        this.recordShow = true;
      });
    },

    auditHandle(row, flag) {
      this.flag = flag;
      this.auditData.familyCode = row.familyCode;
      this.auditDialog = true;
    },

    // 拒绝对话框
    deny(talentCode) {
      this.flag = 0;
      this.auditDialog = true;
      this.refuseCode = talentCode;
    },
    cancelBtn() {
      this.refuseTextarea = null;
      this.refuseValue = "";
      this.auditDialog = false;
    },
    confirmBtn() {
      if (this.flag == 0) {
        // 通过
        if (this.auditData.stateCode) {
          console.log(this.auditData, "审核");
          familyAudit(this.auditData).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.msg || "审核成功");
              this.auditDialog = false;
              this.init();
            } else {
              this.$message.success(res.msg || "审核失败");
            }
          });
        } else {
          this.$message.warning("请先选择审批状态");
        }
      } else {
        this.auditData.state = "不符合";
        this.auditData.stateCode = "002";
        familyAudit(this.auditData).then((res) => {
          if (res.code == 200) {
            console.log(res, 111);
            this.$message.success(res.msg || "审核成功");
            this.auditDialog = false;
            this.init();
          } else {
            this.$message.success(res.msg || "审核失败");
          }
        });
      }
    },
  },
  mounted() {},
  created() {
    this.userName = localStorage.getItem("userName");
    this.branchCode = this.$route.query.branchCode
      ? this.$route.query.branchCode
      : "";
    this.code = this.$route.query.code ? this.$route.query.code : "";
    this.init();
    this.initType();
    this.initReviewState();
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/stylus/common';

.table-wrapper1 {
  margin-top: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  max-height: calc(100vh - 320px);
  overflow: auto;
}

.el-form-item {
  margin-right: 5px;
}

.early, .warning {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-block;
}

.early {
  background: #FFD700;
}

.warning {
  background: red;
}

.content {
  max-height: 60vh;
  overflow-y: auto;

  .cell {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;

    .label {
      width: 150px;
      color: #999;
      text-align: left;

      span {
        color: red;
        font-size: 12px;
      }
    }

    .value {
      color: #000;
      text-align: left;
    }

    .info {
      .item {
        width: 100%;
        text-align: left;
        color: #000;
        margin-bottom: 10px;
      }

      .item:last-child {
        margin-bottom: 0;
      }
    }
  }
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 2px;
}

.state {
  display: flex;
  align-items: center;
}
</style>
