<template>
  <div class="Liftcertificate">
    <div class="LiftcertificateMain">
      <div class="CRTop">
        <div>
          <span>办公OA / 操作证管理</span>
        </div>
      </div>
      <el-row>
        <el-tabs class="BCtabs" v-model="activeName" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="维保工操作证" name="first"></el-tab-pane>
          <el-tab-pane label="其他操作证" name="second"></el-tab-pane>
          <p class="SearchTitle">
            总记录条数
            <span style="color:#379FFF">{{TitleTotal}}</span>条
          </p>
          <el-form
            class="TableSelectMain"
            :model="LiftcertificateSearch"
            :inline="true"
            label-position="left"
            :header-cell-style="{'background-color':'rgba(250,250,250,1)'}"
          >
            <el-row>
              <el-form-item style="width:15%">
                <el-input v-model="LiftcertificateSearch.username" placeholder="输入姓名"></el-input>
              </el-form-item>

              <el-form-item style="width:20%">
                <el-select v-model="LiftcertificateSearch.status" filterable placeholder="请选择证件状态">
                  <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" round @click="searchInsp">查询</el-button>
                <el-button type="info" plain round @click="resetCert">重置</el-button>
              </el-form-item>
            </el-row>
          </el-form>
          <div class="CertificateTable">
            <el-table
              ref="multipleTable"
              :data="CertificateData"
              style="width: 100%"
              tooltip-effect="dark"
              class="CFTable"
              border
              v-loading="CertificateDataLoad"
            >
              <el-table-column prop="username" label="姓名"></el-table-column>

              <el-table-column prop="code" label="操作证号" min-width="120px" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="issuanceAgency" label="发证单位" min-width="120px" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="certificateType" label="证件类型" min-width="120px" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="有效期">
                <template slot-scope="props">
                  <span>{{props.row.expirationDate?props.row.expirationDate.substring(0,10):''}}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" min-width="100px" :show-overflow-tooltip="true">
                <template slot-scope="props">
                  <span>{{props.row.status==0?'无证':(props.row.status==1?'待审核':(props.row.status==2?'审核未通过':(props.row.status==3?'审核通过':(props.row.status==4?'超期':''))))}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="200px;" fixed="right">
                <template slot-scope="props">
                  <el-button
                    v-if="props.row.status!=0"
                    type="primary"
                    plain
                    @click="ShowLiftCertificateImg(props.row)"
                  >查看操作证</el-button>
                  <el-button
                    v-if="(props.row.status==1||props.row.status==2)&&Liftcertificate.Liftcertificate126"
                    type="warning"
                    plain
                    @click="PassLiftCertificate(props.row)"
                  >审核通过</el-button>
                  <el-button
                    v-if="(props.row.status==1||props.row.status==2)&&Liftcertificate.Liftcertificate127"
                    type="danger"
                    plain
                    @click="unPassLiftCertificate(props.row)"
                  >审核不通过</el-button>
                  <el-button
                    v-if="props.row.status!=1&&props.row.status!=0&&Liftcertificate.Liftcertificate128"
                    type="success"
                    plain
                    @click="ShowLiftCertificateHistory(props.row,1)"
                  >更新</el-button>
                  <el-button
                    v-if="props.row.status==0&&Liftcertificate.Liftcertificate125"
                    type="success"
                    plain
                    @click="ShowLiftCertificateHistory(props.row,2)"
                  >新增</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagenation">
              <span>
                <el-pagination
                  background
                  layout="prev, pager, next, sizes, total, jumper"
                  :total="TitleTotal"
                  @current-change="click"
                  @size-change="handleSizeChange"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="pagesize"
                ></el-pagination>
              </span>
            </div>
          </div>
        </el-tabs>
      </el-row>
    </div>

    <!--操作证扫描件-->
    <div class="CertificatePic">
      <el-dialog
        title="操作证扫描件"
        :visible.sync="dialogCertificatePic"
        width="40%"
        :before-close="handleClose"
      >
        <div class="block">
          <el-carousel height="350px">
            <el-carousel-item v-for="item in CertificatePicData" :key="item.Sort">
              <el-image :src="item.ImgURL" fit="fill"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div slot="footer" class="dialog-footer Txc">
          <el-button @click="dialogCertificatePic = false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>

    <!--更新-->
    <div class="CertificateHistory">
      <el-dialog
        :title="ShowLiftCertificateHistoryUpdate==1?('更新操作证 / '+ShowLiftCertificateName):'新增操作证 '"
        :visible.sync="dialogCertificateHistory"
        width="65%"
        :before-close="handleClose"
      >
        <div>
          <el-form
            :model="CertificateHistory"
            :inline="true"
            label-position="left"
            :rules="CertificateHistoryRule"
            ref="CertificateHistory"
          >
            <el-row>
              <el-form-item label="操作证号" prop="code">
                <el-input placeholder="输入操作证号" v-model="CertificateHistory.code"></el-input>
              </el-form-item>
              <el-form-item label="发证单位" prop="issuanceAgency">
                <el-input placeholder="输入发证单位" v-model="CertificateHistory.issuanceAgency"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="证件类型" prop="certificateType">
                <el-input placeholder="输入发证单位" v-model="CertificateHistory.certificateType"></el-input>
              </el-form-item>
              <el-form-item label="有效期" prop="expirationDate">
                <el-date-picker
                  type="date"
                  placeholder="输入证件有效期"
                  v-model="CertificateHistory.expirationDate"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-row>

            <el-row class="selfcheckReportImg">
              <span style="display: inline-block;margin-top: 12px;color: #F56C6C;">*</span>
              <el-form-item label="上传操作证扫描" style="width:100%">
                <el-upload
                  class="avatar-uploader"
                  ref="fileList"
                  action="https://app.edtyun.com:8443/business/common/upload"
                  :headers="{'Authorization':token}"
                  :show-file-list="false"
                  :before-upload="beforeUploadFile1"
                  :on-success="handleAvatarSuccess"
                  :on-remove="handleRemove"
                >
                  <img
                    v-if="CertificateHistory.firstImgUrl"
                    :src="CertificateHistory.firstImgUrl"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <!-- <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :limit="2"
                  :on-exceed = "handlePicturelimit"
                  :on-success="handlePictureCardsuccess"
                  :on-remove="handleRemove"
                >
                <i class="el-icon-plus"></i>
                </el-upload>-->
                <el-upload
                  class="avatar-uploader"
                  ref="fileList"
                  action="https://app.edtyun.com:8443/business/common/upload"
                  :show-file-list="false"
                  :before-upload="beforeUploadFile2"
                  :on-success="handleAvatarSuccess1"
                  :on-remove="handleRemove1"
                >
                  <img
                    v-if="CertificateHistory.secondImgUrl"
                    :src="CertificateHistory.secondImgUrl"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer Txc">
          <el-button @click="dialogCertificateHistory = false">取 消</el-button>
          <el-button type="primary" @click="submitHis('CertificateHistory')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--上传图片-->
    <div class="uploadImg">
      <el-dialog :visible.sync="dialogVisible">
        <img width="60%" :src="dialogImageUrl" alt />
      </el-dialog>
    </div>
    <!--审核不通过-->
    <div class="unPassLiftCertificate">
      <el-dialog
        title="审核不通过"
        :visible.sync="dialogunPassLiftCertificate"
        width="30%"
        :before-close="handleClose"
      >
        <p>确定不通过该审核吗？</p>
        <div slot="footer" class="dialog-footer Txc">
          <el-button type="primary" @click="submitIsPass(2)">确 定</el-button>
          <el-button type="primary" @click="dialogunPassLiftCertificate = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>

    <!--通过审核-->
    <div class="PassLiftCertificate">
      <el-dialog
        title="通过审核"
        :visible.sync="dialogPassLiftCertificate"
        width="30%"
        :before-close="handleClose"
      >
        <p>确定通过该审核吗？</p>
        <div slot="footer" class="dialog-footer Txc">
          <el-button type="primary" @click="submitIsPass(1)">确 定</el-button>
          <el-button type="primary" @click="dialogPassLiftCertificate = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: "Liftcertificate",
  data() {
    const _initCertificateHistory = CertificateHistory => {
      const _CertificateHistory = {
        id: "",
        ownerId: "",
        status: "",
        code: "",
        issuanceAgency: "",
        certificateType: "",
        expirationDate: "",
        firstImgUrl: "",
        secondImgUrl: ""
      };

      _CertificateHistory.id = CertificateHistory.id;
      _CertificateHistory.ownerId = CertificateHistory.ownerId;
      _CertificateHistory.status = CertificateHistory.status;
      _CertificateHistory.code = CertificateHistory.code;
      _CertificateHistory.issuanceAgency = CertificateHistory.issuanceAgency;
      _CertificateHistory.certificateType = CertificateHistory.certificateType;
      _CertificateHistory.firstImgUrl = CertificateHistory.firstImgUrl;
      _CertificateHistory.secondImgUrl = CertificateHistory.secondImgUrl;
      _CertificateHistory.expirationDate = CertificateHistory.expirationDate;
      return _CertificateHistory;
    };

    return {
      fileList:[],
      activeName: "first",
      handleClose: null,
      LiftcertificateSearch: {
        username: "",
        status: ""
      },
      pageNum:1,
      pageSize:10,
      statusList: [
        {
          value: 0,
          name: "无证"
        },
        {
          value: 1,
          name: "待审核"
        },
        {
          value: 2,
          name: "审核未通过"
        },
        {
          value: 3,
          name: "审核通过"
        },
        {
          value: 4,
          name: "超期"
        }
      ],
      CertificateData: [
        {
          Code: null,
          ExpirationDate: "2020-07-19",
          FirstImgURL: null,
          ID: 0,
          IssuanceAgency: null,
          Name: "胡广盈",
          OwnerID: 0,
          SecondImgURL: null,
          Status: 0,
          Type: null,
          UserID: 1001101131115
        },
        {
          Code: "2585568418        ",
          ExpirationDate: "2022-07-19",
          FirstImgURL:
            "http://edtyun.cc/LiftCertificate/1001101131068/1_0.jpg?x-oss-process=image/watermark,image_d2F0ZXJtYXJrLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSxQXzMw,t_60/quality,q_60/auto-orient,0",
          ID: 1001103101502,
          IssuanceAgency: "武汉质监局",
          Name: "李清",
          OwnerID: 1001101131068,
          SecondImgURL:
            "http://edtyun.cc/LiftCertificate/1001101131068/1_1.jpg?x-oss-process=image/watermark,image_d2F0ZXJtYXJrLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSxQXzMw,t_60/quality,q_60/auto-orient,0",
          Status: 3,
          Type: "维保资质",
          UserID: 1001101131068
        },
        {
          Code: "888               ",
          ExpirationDate: "2020-07-19",
          FirstImgURL:
            "http://edtyun.cc/LiftCertificate/1001101131070/1_0.jpg?x-oss-process=image/watermark,image_d2F0ZXJtYXJrLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSxQXzMw,t_60/quality,q_60/auto-orient,0",
          ID: 1001103101503,
          IssuanceAgency: "武汉质监局",
          Name: "龚小钰",
          OwnerID: 1001101131070,
          SecondImgURL:
            "http://edtyun.cc/LiftCertificate/1001101131070/1_1.jpg?x-oss-process=image/watermark,image_d2F0ZXJtYXJrLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSxQXzMw,t_60/quality,q_60/auto-orient,0",
          Status: 1,
          Type: "维保工",
          UserID: 1001101131070
        }
      ],
      CertificateDataLoad:false,
      CertificatePicData: [
        {
          ImgURL:
            "http://edtyun.cc/LiftCertificate/1001101131068/1_0.jpg?x-oss-process=image/watermark,image_d2F0ZXJtYXJrLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSxQXzMw,t_60/quality,q_60/auto-orient,0",
          MTRecordID: 1,
          Sort: 1
        },
        {
          ImgURL:
            "http://edtyun.cc/LiftCertificate/1001101131068/1_1.jpg?x-oss-process=image/watermark,image_d2F0ZXJtYXJrLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSxQXzMw,t_60/quality,q_60/auto-orient,0",
          MTRecordID: 2,
          Sort: 2
        }
      ],
      dialogCertificatePic: false,
      CertificateHistory: {},
      initCertificateHistory(CertificateHistory) {
        this.CertificateHistory = _initCertificateHistory(CertificateHistory);
      },
      token:'',
      dialogCertificateHistory: false,
      ShowLiftCertificateHistoryUpdate:'',
      dialogImageUrl: "",
      dialogVisible: false,
      dialogunPassLiftCertificate: false,
      dialogPassLiftCertificate: false,
      certificateType: 1,
      TitleTotal: 0,
      pagesize: 10,
      currpage: 1,
      ShowLiftCertificateName: "",
      CertificateHistoryRule: {
        code: [
          { required: true, message: "操作证号不能为空", trigger: "blur" }
        ],
        issuanceAgency: [
          { required: true, message: "发证单位不能为空", trigger: "blur" }
        ],
        certificateType: [
          { required: true, message: "证件类型不能为空", trigger: "blur" }
        ],
        expirationDate: [
          { required: true, message: "有效期不能为空", trigger: "blur" }
        ]
      },
      Liftcertificate:{
        Liftcertificate119:0,
        Liftcertificate120:0,
        Liftcertificate121:0,
        Liftcertificate122:0,
      }
    };
  },
  created() {
    this.getCertificateDate(this.certificateType, 1, 10);
    this.token= JSON.parse(sessionStorage.getItem('token'))

    var LiftcertificateBtn = {}
    this.getButton(124).then(result => {
      if (result.data.statusCode==="1") {
        LiftcertificateBtn = result.data.data
        LiftcertificateBtn.map((item)=>{
          if(item.id==125){
            this.Liftcertificate.Liftcertificate125 = item.checked?1:0 
          }else if(item.id==126){
            this.Liftcertificate.Liftcertificate126 = item.checked?1:0  
          }else if(item.id==127){
            this.Liftcertificate.Liftcertificate127 = item.checked?1:0  
          }else if(item.id==128){
            this.Liftcertificate.Liftcertificate128 = item.checked?1:0  
          }
        })
      }
    });
  },
  methods: {
    handleClick(tab, event) {
      if (tab.$el.id == "pane-first") {
        this.certificateType = 1;
      } else if (tab.$el.id == "pane-second") {
        this.certificateType = 2;
      }
      this.getCertificateDate(
        this.certificateType,
        this.pageNum,
        this.pageSize
      );
    },
    //数据
    getCertificateDate(certificateType, pageNum, pageSize) {
      this.CertificateDataLoad = true;
      var url = "enterprise/oa/liftCertificate/list";
      var param = {
        certificateType: certificateType,
        pageNum: pageNum,
        pageSize: pageSize,
        mtCompanyId:sessionStorage.getItem('mtCompanyId')
        // mtCompanyId: 1001102100000
      };
      param.username =this.LiftcertificateSearch.username
        ? this.LiftcertificateSearch.username
        : "";
      param.status = this.LiftcertificateSearch.status
      this.axios.post(url, param).then(result => {
        var data = result;
        if (data.statusCode) this.CertificateDataLoad = false
        if (data.statusCode === "1") {
          this.CertificateData = data.data.page.rows;
          this.TitleTotal = data.data.page.total;
        } else if (data.statusCode === "9") {
          this.CertificateData = [];
          this.TitleTotal = 0;
        } else {
          this.$message.error(data.message);
        }
      });
    },
    //查看操作证
    ShowLiftCertificateImg(row) {
      var ImageList = [
        {
          ImgURL:""
        },{
          ImgURL:""
        }
      ];
      ImageList[0].ImgURL = row.firstImgUrl;
      ImageList[1].ImgURL = row.secondImgUrl;
      this.CertificatePicData = ImageList;
      this.dialogCertificatePic = true;
    },
    //审核不通过
    unPassLiftCertificate(row) {
      this.PassId = row.id;
      this.dialogunPassLiftCertificate = true;
    },
    //审核通过
    PassLiftCertificate(row) {
      this.PassId = row.id;
      this.dialogPassLiftCertificate = true;
    },
    submitIsPass(status) {
      var url = "enterprise/oa/liftCertificate/audit";
      var param = {
        id: this.PassId,
        pass: status == 1 ? true : false
      };
      this.axios.post(url, param).then(result => {
        var data = result;
        if (data.statusCode === "1") {
          this.$message.success(data.message);
          status == 1
            ? (this.dialogPassLiftCertificate = false)
            : (this.dialogunPassLiftCertificate = false);
          this.getCertificateDate(
            this.certificateType,
            this.pageNum,
            this.pageSize
          );
        } else {
          this.$message.error(data.message);
        }
      });
    },
    //更新
    ShowLiftCertificateHistory(row,index) {
      if(index==1){
        this.ShowLiftCertificateHistoryUpdate = 1
        this.ShowLiftCertificateName = "";
        this.initCertificateHistory("");
        this.ShowLiftCertificateName = row.username;
        this.initCertificateHistory(row);
      }else{
        this.ShowLiftCertificateHistoryUpdate = 0
        this.ShowLiftCertificateName = "";
        this.initCertificateHistory("");
        this.CertificateHistory.ownerId = row.ownerId
      }
      this.dialogCertificateHistory = true;
      
    },
    //上传图片
    handleAvatarSuccess(res, file) {
      this.CertificateHistory.firstImgUrl = res.data;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeUploadFile2(file) {
      console.log(file)
      let size = file.size / 1024 / 1024
      if(size > 2) {
        this.$message.warning({
          title: '警告',
          message: `文件大小不得超过2M`
        });
        return false
      }
    },
    beforeUploadFile1(file) {
      console.log(file)
      let size = file.size / 1024 / 1024
      if(size > 2) {
        this.$message.warning({
          title: '警告',
          message: `文件大小不得超过2M`
        });
        return false
      }
    },
    handleAvatarSuccess1(res, file) {
      this.CertificateHistory.secondImgUrl = res.data;
    },
    handleRemove1(file, fileList) {
      console.log(file, fileList);
    },

    // 分页页码
    click(val) {
      this.currpage = val;
      this.getCertificateDate(
        this.certificateType,
        val,
        this.pageSize
      );
    },
    // 分页显示条数
    handleSizeChange(val) {
      this.pagesize = val;
      this.getCertificateDate(
        this.certificateType,
        this.pageNum,
        val
      );
    },
    searchInsp() {
      this.getCertificateDate(
        this.certificateType,
        this.pageNum,
        this.pageSize
      );
    },
    resetCert() {
      this.LiftcertificateSearch.username = "";
      this.LiftcertificateSearch.status = "";
      this.getCertificateDate(
        this.certificateType,
        this.pageNum,
        this.pageSize
      );
    },
    submitHis(formName) {
      if(this.ShowLiftCertificateHistoryUpdate==1){
        console.log(this.CertificateHistory)
        this.$refs[formName].validate(valid => {
          if (valid) {
            var url = "enterprise/oa/liftCertificate/modify";
            if (!this.CertificateHistory.firstImgUrl) {
              this.$message.error("请上传操作证正面图片");
            } else if (!this.CertificateHistory.secondImgUrl) {
              this.$message.error("请上传操作证反面图片");
            } else {

              var param = this.CertificateHistory;
              param.mtCompanyId = sessionStorage.getItem('mtCompanyId')
              this.axios.post(url, param).then(result => {
                var data = result;
                if (data.statusCode === "1") {
                  this.$message.success(data.message);
                  this.getCertificateDate(
                    this.certificateType,
                    this.pageNum,
                    this.pageSize
                  );
                  this.dialogCertificateHistory = false;
                } else {
                  this.$message.error(data.message);
                }
              });
            }
          } else {
            console.log(2);
            this.$message({
              message: "请输入正确信息！",
              type: "warning"
            });
            return;
          }
        });
      }else{
        var url = "enterprise/oa/liftCertificate/add";
        if (!this.CertificateHistory.firstImgUrl) {
          this.$message.error("请上传操作证正面图片");
        } else if (!this.CertificateHistory.secondImgUrl) {
          this.$message.error("请上传操作证反面图片");
        } else {

          var param = this.CertificateHistory;
          param.mtCompanyId = sessionStorage.getItem('mtCompanyId')
          this.axios.post(url, param).then(result => {
            var data = result;
            if (data.statusCode === "1") {
              this.$message.success(data.message);
              this.getCertificateDate(
                this.certificateType,
                this.pageNum,
                this.pageSize
              );
              this.dialogCertificateHistory = false;
            } else {
              this.$message.error(data.message);
            }
          });
        }
      }
      
    }
  }
};
</script>
<style lang="stylus">
$ft14 = 14px;

.Liftcertificate {
  height: 100%;

  .LiftcertificateMain {
    height: 100%;
    background: #fff;

    .SearchTitle {
      
    }
  }

  .cell {
    text-align: center;
  }

  .el-tabs__header.is-top {
    margin: 15px 20px;
  }

  .CertificateSelect {
    font-size: $ft14;
    padding: 10px 20px;
  }

  .CFTable {
    .el-button {
      padding: 8px;
      font-size: 12px;
      border-radius: 10px;
      margin-bottom: 5px;
    }
  }

  .CertificatePic {
    .el-image {
      width: 100%;
      height: 100%;
    }
  }

  .selfcheckReportImg .el-form-item .el-form-item__content {
    width: 100%;
  }

  .avatar-uploader {
    display: inline-block;
    width: 50%;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 90%;
    height: 300px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 400px;
    height: 300px;
    display: block;
  }
  
}
</style>