<style scoped>
  /deep/.el-table th.el-table__cell {
    background-color: #E6E6E6;
  }
  /deep/.msgbox .el-upload{
    width: 100% !important;
  }
  /deep/.msgbox .el-upload-dragger{
    width: 100% !important;
    height: auto;
    border: 0;
  }
  .button{
    padding: 4px;
  }
  .msgbox{
    width: 50%;
    float: left;
  }
  .msgbox.width100{
    width: 100%;
  }
  .img-box-form{
    display: flex;
  }
  .img-box{
    width: 40px;
    height: 40px;
    margin-right: 20px;
  }
  ._wenjian_P {
    font-size: 21px;
    text-align: center;
    color: #41D2A1;
  }

</style>

<template>
  <div class="page_fnDm page_RecPayQuery">
    <div class="query-box">
      <el-form class="_info_box clearfix" label-width="110px">
        <el-row style="padding:15px 20px 0 0;">
          <el-col :span="4">
            <el-form-item :label="$t('objFill.v101.dmc.gongysxx')">
              <el-input placeholder="" v-model="msg.Name"
                maxlength="-1"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="4">
            <el-form-item label="财务信息：">
              <el-input placeholder="" v-model="msg.FinanceMan"
                maxlength="-1"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="4">
            <el-form-item :label="$t('ground.fenlei')">
              <el-select filterable v-model='msg.GroundingType' class="">
                <el-option key="0" value="0" :label="$t('pub.unlimitedSel')"></el-option>
                <el-option v-for="item in sortList" :key="item.ID" :value="item.ID" :label="item.Name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('advmanager.v_line')">
              <el-select filterable v-model='msg.LineId' class="">
                <el-option key="0" value="0" :label="$t('pub.unlimitedSel')"></el-option>
                <el-option v-for="item in LineList" :key="item.LineID" :value="item.LineID" :label="item.LineName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <ul class="clearfix">
        <li class="hight_query">
          <button class="hollowFixedBtn" @click="resetPageIndex()">{{$t('pub.searchBtn')}}</button>
          <button class="normalBtn" @click="addShow()">{{$t('objFill.v101.dmc.xinzgys')}}</button>
        </li>
      </ul>
    </div>
    <div class="_fnDm_content" v-loading='loading'>
      <el-table ref="multipleTable" :data="DataList" tooltip-effect="dark" style="width: 100%">

        <el-table-column prop="Name" :label="$t('hotel.suplier_name')"></el-table-column>
        <el-table-column prop="GroundingTypeStr" :label="$t('ground.fenlei')"></el-table-column>
        <el-table-column prop="Address" :label="$t('objFill.v101.dmc.gongysdz')"></el-table-column>
        <el-table-column prop="LinkMan" :label="$t('objFill.v101.dmc.gongyslxr')"></el-table-column>
        <el-table-column prop="LinkTel" :label="$t('objFill.v101.dmc.gongysdh')"></el-table-column>
        <el-table-column prop="LinkDuties" :label="$t('objFill.v101.dmc.gongyszw')"></el-table-column>
        <!-- <el-table-column prop="FinanceMan" label="财务联系人"></el-table-column>
        <el-table-column prop="FinanceTel" label="财务电话"></el-table-column>
        <el-table-column prop="FinanceDuties" label="财务职务"></el-table-column> -->
        <el-table-column prop="" :label="$t('fnc.hetong')">
          <template slot-scope="scope">
            <div v-if="verificationFile(scope.row.ContractUrl,3)" class="img-box">
              <div style="width:100%;height:100%;">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="scope.row.ContractUrl"
                  :preview-src-list="[scope.row.ContractUrl]">
                </el-image>
              </div>
            </div>
            <div v-if="verificationFile(scope.row.ContractUrl,1)" class="img-box">
              <div class="iconfont _wenjian_P"
                :class="scope.row.ContractUrl.substring(scope.row.ContractUrl.lastIndexOf('.')+1,scope.row.ContractUrl.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"
                @click="showUpLoadFile(scope.row.ContractUrl)">
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ContractEndTime" :label="$t('objFill.v101.dmc.hetdqsj')"></el-table-column>
        <el-table-column prop="" :label="$t('advmanager.v_line')">
          <template slot-scope="scope">
            <span v-for="(x,index) in scope.row.LineInfoList">
              {{x.LineName}}
              <span v-if="scope.row.LineInfoList.length-1!=index">、</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('admin.admin_status')">
          <template slot-scope="scope">
            <span v-if="scope.row.AccountStatus==1" class="groupTourOrder_count_green">
              {{$t('pub.normalSel')}}
            </span>
            <span v-if="scope.row.AccountStatus==2" class="groupTourOrder_count_yellow">
              {{$t('visa.v_jujue')}}
            </span>
            <span v-if="scope.row.AccountStatus==0" class="c059FF6">
              {{$t('fnc.a_shezhong')}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('admin.admin_czPerson')">
          <template slot-scope="scope">
            <p>{{scope.row.CreateByName}}</p>
            <p>{{scope.row.CreateDate}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('system.table_operation')" width="165">
          <template slot-scope="scope">
            <template v-if="(scope.row.IsSeeAll==1&&userInfo.EmployeeId==scope.row.CreateBy)||scope.row.IsSeeAll==0">
              <el-tooltip class="item" effect="dark" :content="$t('visaT.Accountmanagement')" placement="top">
                <el-button @click="AccountManage(scope.row)"
                class="button" type="primary"
                icon="el-icon-s-finance" circle>
                </el-button>
              </el-tooltip>
              <el-button @click="Edit(scope.row)"
              class="button" type="primary"
              icon="el-icon-edit" circle>
              </el-button>
            </template>


            <!-- <el-tooltip class="item" effect="dark" :content="$t('fnc.xiangqing')" placement="top">
              <el-button @click="Edit(scope.row,1)"
              class="button" type="info"
              icon="el-icon-view" circle>
              </el-button>
            </el-tooltip> -->
            <el-tooltip v-if="scope.row.AccountStatus==0&&scope.row.IsSeeAll==0" class="item" effect="dark" :content="$t('fnc.shenhe')" placement="top">
              <el-button @click="clickExamine(scope.row)"
              class="button" type="primary"
              icon="el-icon-check" circle>
              </el-button>
            </el-tooltip>
            <template v-if="(scope.row.IsSeeAll==1&&userInfo.EmployeeId==scope.row.CreateBy)||scope.row.IsSeeAll==0">
              <el-button @click="Delete(scope.row)"
              class="button" type="danger"
              icon="el-icon-delete" circle></el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-bottom:15px">
        <el-pagination background @current-change="handleCurrentChanges" layout="total,prev, pager, next, jumper"
          :page-size="msg.pageSize" :total='total'>
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="`${titleName}$t('objFill.gongyinshang')`" :visible.sync="showVisible" width="750px" @close="resetForm('form')">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <div class="msgbox">
          <el-form-item :label="$t('advmanager.v_line')" prop="LineId">
            <el-select
              v-model="form.LineId"
              multiple
              collapse-tags
              style="width: 100%;"
              :placeholder="$t('pub.pleaseSel')">
              <el-option
                v-for="item in LineList"
                :key="item.LineID"
                :label="item.LineName"
                :value="item.LineID">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="msgbox">
          <el-form-item :label="$t('objFill.v101.dmc.gongysdl')" prop="GroundingTypeInfo">
            <el-select filterable v-model='form.GroundingTypeInfo'   multiple
              collapse-tags style="width: 100%;">
              <el-option v-for="item in sortList" :key="item.ID" :value="item.ID" :label="item.Name">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="msgbox">
          <el-form-item :label="$t('hotel.suplier_name')" prop="Name">
            <el-input v-model="form.Name" clearable></el-input>
          </el-form-item>
        </div>
        <div class="msgbox">
          <el-form-item :label="$t('objFill.v101.dmc.daoqsj')" prop="ContractEndTime">
            <el-date-picker
            v-model="form.ContractEndTime"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :placeholder="$t('objFill.v101.dmc.xuanzhtdqsj')">
          </el-date-picker>
          </el-form-item>
        </div>
        <div class="msgbox">
          <el-form-item :label="$t('objFill.v101.dmc.gongyslxr')" prop="LinkMan">
            <el-input v-model="form.LinkMan" clearable></el-input>
          </el-form-item>
        </div>
        <div class="msgbox">
          <el-form-item :label="$t('objFill.v101.dmc.gongysdh')" prop="LinkTel">
            <el-input v-model="form.LinkTel" clearable></el-input>
          </el-form-item>
        </div>
        <div class="msgbox">
          <el-form-item :label="$t('objFill.v101.dmc.gongyszw')" prop="LinkDuties">
            <el-input v-model="form.LinkDuties" clearable></el-input>
          </el-form-item>
        </div>
        <div class="msgbox">
          <el-form-item :label="$t('objFill.v101.dmc.gongysdz')" prop="Address">
            <el-input v-model="form.Address" clearable></el-input>
          </el-form-item>
        </div>
        <div class="msgbox">
          <el-form-item :label="$t('fnc.hetong')" prop="ContractUrl">
            <div class="img-box-form">
              <template v-if="form.ContractUrl">
                <div v-if="verificationFile(form.ContractUrl,3)" class="img-box">
                  <div style="width:100%;height:100%;">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="form.ContractUrl"
                      :preview-src-list="[form.ContractUrl]">
                    </el-image>
                  </div>
                </div>
                <div v-if="verificationFile(form.ContractUrl,1)" class="img-box">
                  <div class="iconfont _wenjian_P"
                    :class="form.ContractUrl.substring(form.ContractUrl.lastIndexOf('.')+1,form.ContractUrl.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"
                    @click="showUpLoadFile(form.ContractUrl)">
                  </div>
                </div>
              </template>
              <div>
                  <el-upload drag :http-request="uploadFileBtn" :multiple="true"
                  :show-file-list="false" action="">
                  <el-button type="primary" size="mini">{{$t('tips.dianjishanhcuan')}}</el-button>
                  </el-upload>
              </div>
            </div>
          </el-form-item>
        </div>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="resetForm('form'),showVisible = false">{{$t('pub.cancelBtn')}}</el-button>
        <el-button size="small" type="danger" @click="submit('form')" :loading="submitLoading">{{$t('pub.sureBtn')}}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="$t('tips.tips')"
      :visible.sync="dialogVisible"
      width="30%">
      <span>{{$t('objFill.v101.dmc.shiftggsj')}}?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ExamineGroundingSupplier(form.Id,2)"
        :loading="submitLoading" size="small">{{$t('visa.v_jujue')}}</el-button>
        <el-button type="primary" @click="ExamineGroundingSupplier(form.Id,1)"
        :loading="submitLoading2" size="small">{{$t('visa.v_tongguo')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        submitLoading2: false,
        dialogVisible: false,
        loading: false,
        DataList: [],
        heightQueryBox: false,
        currentPage:1,
        total: 0,
        msg:{
          pageIndex: 1,
          pageSize: 10,
          Name: '',
          GroundingType:'',
          LineInfo: '',
          LineId: '0'
        },
        LineList:[],
        sortList: [],
        showVisible: false,
        submitLoading: false,
        form:{
          Id: 0,
          Name: '',
          Address: '',
          LinkMan: '',
          LinkTel: '',
          LinkDuties: '',
          GroundingType: '',
          ContractUrl: '',
          LineInfo: '',
          LineId: [],
          GroundingTypeInfo:[],
          ContractEndTime: ''
        },
        rules:{
          Name: [{  required: true,  message: this.$t('visaT.qsrgysname'),  trigger: "blur"}],
          LinkMan: [{  required: true,  message: this.$t('objFill.v101.dmc.qingsrgyslxr'),  trigger: "blur"}],
          LinkTel: [{  required: true,  message: this.$t('objFill.v101.dmc.qingsrgysdh'),  trigger: "blur"}],
          GroundingTypeInfo: [{  required: true,  message: this.$t('objFill.v101.dmc.qingxzgyslx'),  trigger: "change"}],
          LineId: [{  required: true,  message: this.$t('objFill.v101.dmc.qingxzlx'),  trigger: "change"}],
          ContractUrl: [{  required: true,  message: this.$t('objFill.v101.dmc.qingscht'),  trigger: "buttom"}],
          ContractEndTime: [{  required: true,  message: this.$t('objFill.v101.dmc.qingxzhtdqsj'),  trigger: "change"}],
        },
        titleName: this.$t('pub.addBtn'),
        userInfo: {}
      }
    },
    created() {
      this.userInfo = this.getLocalStorage();
      this.msg.Id = this.$route.query.Id?this.$route.query.Id:''
    },
    components: {

    },
    mounted() {
      this.getPageList()
      this.GetSelectList()
    },
    methods: {
      //账户管理
      AccountManage(row) {
        this.$router.push({
          name: "empBankAccount",
          query: { id: row.Id, type: 11 ,blank:'y',tab:'供应商账号管理' }
        });
      },
      addShow(){
        this.titleName = this.$t('pub.addBtn')
        this.showVisible = true
      },
      Edit(row,type){
        if(type==1){
          this.titleName = this.$t('fnc.chakan')
          this.apipost('travel_get_GetGroundingSupplier', {
              Id: row.Id
            }, res => {
            if (res.data.resultCode == 1) {
              this.form = res.data.data
              this.form.LineId = res.data.data.LineInfo.split(',').map(x=>{ return Number(x) })
              this.form.GroundingTypeInfo = res.data.data.GroundingType.split(',').map(x=>{ return Number(x) })
            } else {
              this.Error(res.data.message)
            }
          })

        }else{
          this.titleName = this.$t('pub.edit')
          // this.form = {
          //   Id: row.Id,
          //   Name: row.Name,
          //   Address: row.Address,
          //   LinkMan: row.LinkMan,
          //   LinkTel: row.LinkTel,
          //   LinkDuties: row.LinkDuties,
          //   FinanceMan: row.FinanceMan,
          //   FinanceTel: row.FinanceTel,
          //   FinanceDuties: row.FinanceDuties,
          //   GroundingType: row.GroundingType,
          //   ContractUrl: row.ContractUrl,
          //   LineInfo: row.LineInfo,
          //   LineId: row.LineInfo.split(',').map(x=>{ return Number(x) }),
          //   ContractEndTime: ''
          // }
          this.form = JSON.parse(JSON.stringify(row))
          this.$set(this.form, 'LineId', row.LineInfo.split(',').map(x=>{ return Number(x) }))
          this.$set(this.form, 'GroundingTypeInfo', row.GroundingType.split(',').map(x=>{ return Number(x) }))
        }
        this.showVisible = true
      },
      clickExamine(row){
        this.form = JSON.parse(JSON.stringify(row))
        this.dialogVisible = true
        // let _this = this
        // this.$confirm("审核该数据", this.$t('tips.tips'), {
        //     confirmButtonText: "通过",
        //     cancelButtonText: this.$t('visa.v_jujue'),
        //     type: "warning"
          // })
          // .then(() => {
          //   _this.ExamineGroundingSupplier(row.Id,1)
          // })
          // .catch(() => {
          //   _this.ExamineGroundingSupplier(row.Id,2)
          // });
      },
      ExamineGroundingSupplier(Id,AccountStatus){
        if(AccountStatus==1){
          this.submitLoading2 = true
        }else{
          this.submitLoading = true
        }
        this.apipost('travel_get_ExamineGroundingSupplier', {
          Id: Id,
          AccountStatus: AccountStatus
        }, res => {
          this.form = {}
          this.dialogVisible = false
          if(AccountStatus==1){
            this.submitLoading2 = false
          }else{
            this.submitLoading = false
          }
          if (res.data.resultCode == 1) {
            this.Success(res.data.message)
            this.getPageList()
          } else {
            this.Error(res.data.message)
          }
        })
      },
      Delete(row){
        this.$confirm(this.$t('objFill.shifouscbkhf'), this.$t('tips.tips'), {
            confirmButtonText: this.$t('pub.sureBtn'),
            cancelButtonText: this.$t('pub.cancelBtn'),
            type: "warning"
          })
          .then(() => {
            this.apipost('travel_get_DelGroundingSupplier', {
              Id: row.Id
            }, res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message)
                this.getPageList()
              } else {
                this.Error(res.data.message)
              }
            })
          })
          .catch(() => {});
      },
      submit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.form.LineInfo = this.form.LineId.join(',')
            this.form.GroundingType = this.form.GroundingTypeInfo.join(',')
            this.submitLoading = true
            this.apipost(
              'travel_get_SetGroundingSupplier', this.form,
              res => {
                if (res.data.resultCode == 1) {
                  this.resetForm('form')
                  this.getPageList();
                  this.showVisible = false;
                  this.submitLoading = false
                  this.Success(res.data.message)
                } else {
                  this.Error(res.data.message)
                }
              },
              err => {}
            )
          }
        });
      },
      // 初始化表单
      resetForm(formName) {
        this.form = {
          Id: 0,
          Name: '',
          Address: '',
          LinkMan: '',
          LinkTel: '',
          LinkDuties: '',
          GroundingType: '',
          ContractUrl: '',
          LineInfo: '',
          LineId: [],
          GroundingTypeInfo:[],
          ContractEndTime: ''
        }
        this.$refs[formName].resetFields();
      },
      uploadFileBtn(file) { //上传
        if (file.file.size > 1024 * 1024 * 10) {
          this.$message.warning(this.$t('tips.wjdxbncgsz'))
          return
        }
        //  1 文档  2 数据 3 图片
        let typeArr = [{
            stringArr: 'GIF|JPG|JPEG|PNG|BMP',
            type: 3
          },
          {
            stringArr: 'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF',
            type: 1
          },
        ]
        let ft = file.file.name.substring(file.file.name.lastIndexOf('.') + 1, file.file.name.length).toUpperCase();
        let fileTypeNumber = 2;
        let typeOk = false;
        typeArr.forEach(x => {
          if (x.stringArr.indexOf(ft) != '-1') {
            fileTypeNumber = x.type;
            typeOk = true;
          }
        });
        if (!typeOk) return this.$message.error(this.$t('tips.qscWEfile'));
        let newArr = [];
        newArr.push(file.file)
        let path = "/Upload/Temporary/"
        this.$message.info(this.$t('tips.shangchuanzhong'))
        this.UploadSelfFileT(path, newArr, x => {
          let fileSize = file.file.size < 1024 ? file.file.size : (file.file.size / 1024).toFixed(0);
          this.form.ContractUrl = this.domainManager().ViittoFileUrl + x.data.FilePath,
          this.$message.success(this.$t('tips.scchenggong'));
        });
      },

      showUpLoadFile(i) { // 预览上传文件
        if (i.substring(i.lastIndexOf('.') + 1, i.length).toUpperCase() == 'PDF') {
          this.previewPDF(i)
        } else {
          window.open("https://view.officeapps.live.com/op/view.aspx?src=" + i)
        }
      },
      resetPageIndex() { // 重置页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;
        this.getPageList()
      },
      handleCurrentChanges(val){
        this.msg.pageIndex = val;
        this.getPageList()
      },
      getPageList(){
        this.loading = true
        this.apipost("travel_get_GetGroundingSupplierPageList", this.msg, (res) => {
          this.loading = false
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data.pageData;
            this.total = res.data.data.count;
        } else { this.Error(res.data.message) }}, err => {});
      },
      GetSelectList() {
        // 地接类型
        this.apipost('travel_get_GetGroundingTypeEnumList', {}, res => {
          if (res.data.resultCode == 1) {
            this.sortList = res.data.data;
        } else {}}, err => {})
        // 线路
        this.apipost("line_post_GetAllList_V2", {
          LineDirection: 0
        }, (res) => {
          if (res.data.resultCode == 1) {
            this.LineList = res.data.data;
        } else {}}, err => {});
      },
    }
  }

</script>
