<template>
  <div class="policy">
    <div class="search-wrapper">
      <el-form :inline="true" :model="searchForm" class="search_form" style="text-align: left">
        <el-form-item label="姓名">
          <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>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <br />
        <el-form-item label="状态" style="margin-top: 10px">
          <el-radio-group v-model="searchForm.state" @change="onSubmit">
            <el-radio :label="item.state" v-for="item in stateList" :key="item.state">{{ item.stateName }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-wrapper">
      <table-template :tableData="tableData" :tableColumns="tableColumns" :loading="loading" :pagination="pagination"
        @Jump="jumpPage">
        <el-table-column slot="housingType" label="事项类型" align="center">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.housingType == 2 ? '住房' : scope.row.housingType == 3 ? '商办' : '-' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="120" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.housingState === 0 && scope.row.state !== 8">待审核</el-tag>
            <el-tag type="warning" v-if="scope.row.housingState === 0 && scope.row.state === 8">待复审</el-tag>
            <el-tag type="success" v-if="scope.row.housingState === 1">初审通过</el-tag>
            <el-tag type="warning" v-if="scope.row.housingState === 2">待终审</el-tag>
            <el-tag type="success" v-if="scope.row.housingState === 3">已完结</el-tag>
            <el-tag type="danger" v-if="scope.row.housingState === 4">已驳回</el-tag>
            <el-tag type="info" v-if="scope.row.housingState === 5">已撤销</el-tag>
            <el-tag type="warning" v-if="scope.row.housingState === 6">资料审核</el-tag>
            <el-tag type="success" v-if="scope.row.housingState === 7">发放补贴</el-tag>
          </template>
        </el-table-column>
        <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="primary" size="mini" round @click="record(scope.row)">记录</el-button>
            <!-- 申请的单子有通过拒绝-->
            <el-button v-if="scope.row.state === 0" type="success" size="mini" round @click="pass(scope.row)">通过
            </el-button>
            <el-button v-if="scope.row.state === 0" type="danger" size="mini" round @click="deny(scope.row)">拒绝
            </el-button>
            <el-button v-if="
              scope.row.housingState === 3 &&
              searchForm.departmentCode === '10000031'
            " type="success" size="mini" round @click="dispatch(scope.row)">发放补贴</el-button>
            <el-button v-if="
              scope.row.attachedFileMark === true &&
              searchForm.departmentCode === '10000031'
            " type="info" size="mini" round @click="viewUrl(scope.row)">查看附件</el-button>
          </template>
        </el-table-column>
      </table-template>
    </div>
    <el-dialog title="申报详情" :visible.sync="viewShow" width="800px" :close-on-press-escape="false">
      <div class="content">
        <!-- 新增功能start -->
        <el-table :data="totalList" style="width: 100%">
          <el-table-column prop="reasonName" label="审核单位" width="180">
          </el-table-column>
          <el-table-column prop="state" label="审核状态" width="180">
          </el-table-column>
          <el-table-column prop="reason" label="审核意见"> </el-table-column>
        </el-table>
        <div class="cell">
          <p class="label">是否享受过相关政策</p>
          <p :class="['value', viewDetail.enjoyFlag == true ? 'value2' : 'value1']">{{ viewDetail.enjoyFlag ? '否' : '是'
          }}</p>
        </div>
        <div class="cell">
          <p class="label">市契税系统</p>
          <p class="value">{{ viewDetail.tradeStatus === 0 ? '未支付' : viewDetail.tradeStatus === 1 ? '已支付' :
            viewDetail.tradeStatus === 2 ? '不予发放' : '未审核' }}</p>
        </div>
        <!-- 新增功能end -->
        <div class="cell">
          <p class="label">事项类型</p>
          <p class="value">{{ viewDetail.housingType == 2 ? '住房' : viewDetail.housingType == 3 ? '商办' : '-' }}</p>
        </div>
        <div class="cell">
          <p class="label">事项名称</p>
          <p class="value">{{ viewDetail.guideName }}</p>
        </div>
        <div class="cell">
          <p class="label">人才类型</p>
          <p class="value">{{ category }}</p>
        </div>
        <div class="cell">
          <p class="label">人才认定内容</p>
          <p class="value">{{ contentName }}</p>
        </div>
        <div class="cell">
          <p class="label">工作单位</p>
          <p class="value">{{ unitName }}</p>
        </div>
        <div class="cell">
          <p class="label">实施主体</p>
          <p class="value">{{ viewDetail.departmentName }}</p>
        </div>
        <div class="cell">
          <p class="label">姓名</p>
          <p class="value">{{ viewDetail.name }}</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.phone }}</p>
        </div>
        <!-- <div class="cell">
          <p class="label">工作单位</p>
          <p class="value">{{ viewDetail.unit }}</p>
        </div> -->
        <div class="cell">
          <p class="label">联系地址</p>
          <p class="value">{{ viewDetail.address }}</p>
        </div>
        <div class="cell">
          <p class="label">不动产权证号</p>
          <p class="value">{{ viewDetail.realEstateCard }}</p>
        </div>
        <div class="cell">
          <p class="label">不动产权坐落地址</p>
          <p class="value">{{ viewDetail.realEstateAddress }}</p>
        </div>
        <div class="cell">
          <p class="label">房屋面积</p>
          <p class="value">{{ viewDetail.square }}</p>
        </div>
        <div class="cell">
          <p class="label">银行卡号</p>
          <p class="value">{{ viewDetail.bankCard }}</p>
        </div>
        <div class="cell">
          <p class="label">所属银行</p>
          <p class="value">{{ viewDetail.bank }}</p>
        </div>
        <div class="cell" v-if="viewDetail.bankPicture && viewDetail.bankPicture.length > 0">
          <p class="label">银行卡照片</p>
          <p class="value">
            <el-image v-for="(item, index) in viewDetail.bankPicture" :key="index"
              style="width: 100px; height: 100px; margin-right: 10px" :src="item.picture" :z-index="7777777"
              :preview-src-list="[item.picture]">
            </el-image>
          </p>
        </div>
        <div class="cell" v-if="viewDetail.idCardPicture && viewDetail.idCardPicture.length > 0">
          <p class="label">身份证照片</p>
          <p class="value">
            <el-image v-for="(item, index) in viewDetail.idCardPicture" :key="index"
              style="width: 100px; height: 100px; margin-right: 10px" :src="item.picture" :z-index="7777777"
              :preview-src-list="[item.picture]">
            </el-image>
          </p>
        </div>
        <div class="cell">
          <p class="label">商品房买卖合同3张</p>
          <p class="value">
            <el-image v-for="(item, index) in viewDetail.contract" :key="index"
              style="width: 100px; height: 100px; margin-right: 10px" :src="item.picture" :z-index="7777777"
              :preview-src-list="[item.picture]">
            </el-image>
          </p>
        </div>
        <div class="cell">
          <p class="label">不动产权证书</p>
          <p class="value">
            <el-image style="width: 100px; height: 100px" :src="viewDetail.certificate" :z-index="7777777"
              :preview-src-list="[viewDetail.certificate]">
            </el-image>
          </p>
        </div>
        <div class="cell">
          <p class="label">契税完税凭证</p>
          <p class="value">
            <el-image style="width: 100px; height: 100px" :src="viewDetail.voucher" :z-index="7777777"
              :preview-src-list="[viewDetail.voucher]">
            </el-image>
          </p>
        </div>
        <div class="cell" v-if="viewDetail.labour.length > 0">
          <p class="label">上传一年以上劳动合同的上传项目</p>
          <p class="value">
            <el-image v-for="(item, index) in viewDetail.labour" :key="index"
              style="width: 100px; height: 100px; margin-right: 10px" :src="item.picture" :z-index="7777777"
              :preview-src-list="[item.picture]">
            </el-image>
          </p>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="操作记录" :visible.sync="recordShow" width="800px" :close-on-press-escape="false">
      <div class="content">
        <div class="cell" v-for="item in recordList" :key="item.createTime">
          <p class="label" style="margin-right: 20px">
            {{ item.stateName }}
            <span v-if="item.reason">({{ item.reason }})</span>
          </p>
          <div class="info">
            <p class="item">操作人：{{ item.reasonName }}</p>
            <p class="item">操作时间：{{ item.createTime }}</p>
          </div>
        </div>
        <p v-if="record.length === 0">暂无记录~</p>
      </div>
    </el-dialog>
    <el-dialog title="查看附件" :visible.sync="showUrl" width="500px" :close-on-press-escape="false">
      <div style="margin: 0 0 0 10px;font-weight: 700;">图片附件：</div>
      <div class="content" style="display:flex;flex-wrap:wrap;" v-if="pictureUrlList.length > 0">
        <div v-for="(item, index) in pictureUrlList" :key="index">
          <el-image style="width: 95px; height: 95px; margin: 10px;" :src="item.file"
            :preview-src-list="[item.file]"></el-image>
        </div>
      </div>
      <div class="content" style="display:flex;justify-content: center;" v-if="pictureUrlList.length == 0">
        <el-empty :image-size="50"></el-empty>
      </div>
      <div style="margin: 0 0 0 10px;font-weight: 700;">文件附件：</div>
      <div class="content" style="display:flex;flex-direction:column;flex-wrap:wrap;" v-if="fileUrlList.length > 0">
        <div v-for="(item, index) in fileUrlList" :key="index"
          style="margin: 10px 10px 0 10px; display:flex; align-items:center; justify-content: space-between;">
          <p class="label" style="margin: 0;text-align:center;">{{ item.fileExplain }}</p>
          <el-button size="mini" type="primary" @click="
            download(item.file)
          " class="down-text">下载附件</el-button>
        </div>
      </div>
      <div class="content" style="display:flex;justify-content: center;" v-if="fileUrlList.length == 0">
        <el-empty :image-size="50"></el-empty>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableTemplate from "@/components/Table";
import { changeList, setName, setTel, setCertNo } from "@/utils";
import { get } from "@/api/talents";
import {
  mattersHousingReviewerList,
  mattersHousingReviewerUpdate,
  mattersHousingUpdate,
  mattersHousingGet,
  mattersHousingReason,
  mattersGetReason,
  queryAttacheFile
} from "@/api/policy";

export default {
  components: { TableTemplate },
  data() {
    return {
      showUrl: false,
      pictureUrlList: [],
      fileUrlList: [],
      userName: "",
      searchForm: {
        name: "",
        phone: "",
        state: "",
        departmentCode: ""
      },
      stateList: [
        {
          state: "",
          stateName: "全部",
          type: ""
        },
        {
          state: 0,
          stateName: "待审核",
          type: "warning"
        },
        {
          state: 8,
          stateName: "初审通过",
          type: "success"
        },
        {
          state: 9,
          stateName: "已驳回",
          type: "danger"
        }
      ],
      stateList1: [
        {
          state: 0,
          stateName: "待审核",
          type: "warning"
        },
        {
          state: 1,
          stateName: "待复审",
          type: "warning"
        },
        {
          state: 6,
          stateName: "资料审核",
          type: "warning"
        },
        {
          state: 2,
          stateName: "待终审",
          type: "warning"
        },
        {
          state: 3,
          stateName: "已完结",
          type: "success"
        },
        {
          state: 4,
          stateName: "已驳回",
          type: "danger"
        },
        {
          state: 5,
          stateName: "已撤销",
          type: "info"
        },
        {
          state: 7,
          stateName: "发放补贴",
          type: "success"
        },
        {
          state: 8,
          stateName: "初审通过",
          type: "success"
        },
        {
          state: 9,
          stateName: "已驳回",
          type: "danger"
        }
      ],
      loading: false,
      tableData: [],
      tableColumns: [
        {
          key: "code",
          label: "申请编号",
          width: 200
        },
        {
          key: "name",
          label: "姓名"
        },
        {
          key: "phone",
          label: "手机号"
        },
        {
          key: "housingType",
          label: "事项类型",
          type: "slot"
        },
        {
          key: "guideName",
          label: "事项名称"
        },
        {
          key: "departmentName",
          label: "实施主体"
        },
        {
          key: "createTime",
          label: "更新时间",
          width: 180
        }
      ],
      pagination: {
        total: 0,
        pageSize: 10,
        currentPage: 1
      },
      viewShow: false,
      viewDetail: {
        labour: []
      },
      recordShow: false,
      recordList: [],
      examineList: [], // 审核单位数据
      housingList: [], // 住建局列表数据
      totalList: [], // 合并数组
      realName: "",
      category: "",
      contentName: "",
      unitName: ""
    };
  },
  watch: {
    $route() {
      if (this.$route) {
        this.userName = localStorage.getItem('userName');
        // 10000031  财政局code   10000032 税务局code    10000033  不动产登记中心code    10000023 人社局code
        this.searchForm.departmentCode = this.$route.query.departmentCode;
        this.searchForm.name = ''
        this.searchForm.phone = ''
        this.searchForm.state = ''
        this.init();
      }
    }
  },
  methods: {
    download(url) {
      console.log(url)
      let fileType = url.split(".")[url.split('.').length - 1]
      if (fileType == 'pdf' || fileType == 'PDF') {
        window.open(url)
      } else {
        window.location.href = url
      }
    },
    viewUrl(row) {
      console.log(row)
      queryAttacheFile({ code: row.code }).then((res) => {
        console.log(res)
        if (res.success) {
          this.pictureUrlList = res.data.filter((item) => {
            let fileType = item.fileExplain.split(".")[item.fileExplain.split('.').length - 1]
            return fileType == 'jpg' || fileType == 'jpeg' || fileType == 'png'
          })
          this.fileUrlList = res.data.filter((item) => {
            let fileType = item.fileExplain.split(".")[item.fileExplain.split('.').length - 1]
            return fileType != 'jpg' && fileType != 'jpeg' && fileType != 'png'
          })
          console.log(this.pictureUrlList)
          console.log(this.fileUrlList)
          this.showUrl = true
        } else {
          this.$message.error(res.msg || '查询失败');
        }
      })
    },
    init() {
      this.tableData = [];
      this.loading = true;
      let parmas = {
        name: this.searchForm.name,
        phone: this.searchForm.phone,
        state: this.searchForm.state,
        departmentCode: this.searchForm.departmentCode,
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      };
      mattersHousingReviewerList(parmas).then(res => {
        this.loading = false;
        if (res.success) {
          this.pagination.total = res.data.total;
          if (res.data.total) {
            this.tableData = res.data.list.map(item => {
              item.stateName = this.getSatusArr(item.state).stateName;
              item.type = this.getSatusArr(item.state).type;
              return item;
            });
            if (localStorage.getItem('userName') == 'admin') {
              this.tableData = changeList(this.tableData)
            }
          } else {
            this.tableData = []
          }
        }
      });
    },
    onSubmit() {
      this.pagination.currentPage = 1;
      this.init();
    },
    jumpPage() {
      this.init();
    },
    view(row) {
      let params = {
        code: row.code,
        matterType: row.matterType
      };
      let params2 = {
        appId: "1234",
        code: row.code,
        name: this.userName
      };
      // 查询四个部门的记录  mattersHousingReason
      mattersHousingReason(params2).then(res => {
        this.examineList = res.data;
        this.examineList.forEach(item => {
          item.state == 8 ? (item.state = "通过") : (item.state = "拒绝");
        });
        this.totalList = this.examineList.concat(this.housingList);
      });
      // // 查询最后审批的记录
      mattersGetReason(params2).then(res => {
        this.housingList = res.data;
        this.housingList.forEach(item => {
          item.state == 1 ||
            item.state == 2 ||
            item.state == 3 ||
            item.state == 6 ||
            item.state == 7
            ? (item.state = "通过")
            : (item.state = "拒绝");
        });
        this.totalList = this.examineList.concat(this.housingList);
        // console.log("this.totalList---", this.totalList);
      });
      mattersHousingGet(params).then(res => {
        console.log("res11111---", res);
        get({ talentCode: res.data.talentCode }).then(res => {
          this.category = res.data.category;
          this.contentName = res.data.contentName;
          this.unitName = res.data.unitName;
        });
        this.viewDetail = res.data;
        if (localStorage.getItem('userName') == 'admin') {
          this.viewDetail.name = setName(this.viewDetail.name)
          this.viewDetail.phone = setTel(this.viewDetail.phone)
          this.viewDetail.idCard = setCertNo(this.viewDetail.idCard)
        }
        this.viewDetail.idCardPicture = res.data.pictureList.filter(item => {
          return (
            item.pictureType === 1
          )
        });
        this.viewDetail.bankPicture = res.data.pictureList.filter((item) => {
          return (
            item.pictureType === 8
          );
        });
        this.viewDetail.contract = res.data.pictureList.filter(item => {
          return (
            item.pictureType !== 1 &&
            item.pictureType !== 5 &&
            item.pictureType !== 6 &&
            item.pictureType !== 7 &&
            item.pictureType !== 8
          );
        });
        this.viewDetail.certificate = res.data.pictureList.find(item => {
          return item.pictureType === 5;
        }).picture;
        this.viewDetail.voucher = res.data.pictureList.find(item => {
          return item.pictureType === 6;
        }).picture;
        this.viewDetail.labour = [];
        res.data.pictureList.map(item => {
          if (item.pictureType == 7) {
            return this.viewDetail.labour.push(item);
          }
        });
        this.viewShow = true;
      });
    },
    record(row) {
      // console.log();
      mattersHousingReason({ code: row.code }).then(res => {
        let housingReason = res.data;
        mattersGetReason({ code: row.code }).then(res => {
          // console.log('最后的审核记录res---',res);
          let getReason = res.data;
          let reason = housingReason.concat(getReason);
          this.recordList = reason.map(item => {
            item.stateName = this.getSatusArr1(item.state)
              ? this.getSatusArr1(item.state).stateName
              : "未知状态";
            return item;
          });
        });

        this.recordShow = true;
      });
    },
    dispatch(row) {
      this.$confirm(`确定通要发放该申请的补贴吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {
            code: row.code,
            name: this.userName,
            state: 7,
            reviewerId: row.reviewerId
          };
          mattersHousingUpdate(params).then(res => {
            if (res.success) {
              this.$message.success(`发放成功`);
              this.init();
            } else {
              this.$message.error(res.msg || '审核失败');
            }
          });
        })
        .catch(() => {
          // console.log("取消审核");
        });
    },
    pass(row) {
      this.$prompt(`确定通过该申请的初审吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "请输入原因",
        inputType: "textarea",
        type: "warning"
      })
        .then(({ value }) => {
          if (!value) {
            this.$message.error("未输入原因");
            return;
          }
          let params = {
            code: row.code,
            name: this.userName,
            state: 8,
            reviewerId: row.reviewerId,
            reason: value
          };
          mattersHousingReviewerUpdate(params).then(res => {
            if (res.success) {
              this.$message.success(`初审通过`);
              this.init();
            } else {
              this.$message.warning("该申请已被其他部门驳回，无法审核通过");
            }
          });
        })
        .catch(() => {
          // console.log("取消审核");
        });
    },
    deny(row) {
      this.$prompt(`确定驳回该申请的初审吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "请输入原因",
        inputType: "textarea"
      })
        .then(({ value }) => {
          if (!value) {
            this.$message.error("未输入原因");
            return;
          }
          let params = {
            code: row.code,
            name: this.userName,
            state: 9,
            reviewerId: row.reviewerId,
            reason: value
          };

          mattersHousingReviewerUpdate(params).then(res => {
            console.log("res-", res);

            this.$message.success(`初审驳回成功`);
            this.init();
          });
        })
        .catch(() => {
          // console.log("取消审核");
        });
    },
    getSatusArr(state) {
      return this.stateList.filter(item => {
        return item.state === state;
      })[0];
    },
    getSatusArr1(state) {
      return this.stateList1.filter(item => {
        return item.state === state;
      })[0];
    }
  },
  created() {
    this.userName = localStorage.getItem('userName');
    // 10000031  财政局code   10000032 税务局code    10000033  不动产登记中心code    10000023 人社局code
    this.searchForm.departmentCode = this.$route.query.departmentCode;
    this.init();
  }
};
</script>

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

.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;
    }
    .value1{
      color: red;
    }
    .value2{
      color: green;
    }

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

      .item:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
