<template>
  <div class="app-container">
      <div class="wrapper_table">
        <el-table
          :data="tableData"
          stripe
          highlight-current-row
          ref="multipleTable"
          style="width: 100%;"
          :header-cell-class-name="headerStyle"
          :max-height="tableHeight"
          @selection-change="handleSelectionChange"
          :row-key="getRowKeys"
        >
          <el-table-column type="selection" width="55" :reserve-selection="true"  />
          <el-table-column prop="custCode" :label="$t('inventory.custCode')"   align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="custName" :label="$t('inventory.custName')" align="left"  show-overflow-tooltip>
            <template slot-scope="scope">
              <span >{{scope.row.custName}}</span>
          </template>
          </el-table-column>
          <el-table-column prop="colCodeLargeName" :label="$t('levy.colCodeLarge')" show-overflow-tooltip width="130" align="left"></el-table-column>
          <el-table-column prop="colCodeSmallName" :label="$t('levy.colCodeSmall')" show-overflow-tooltip width="130" align="left"></el-table-column>
          <el-table-column prop="colCodeSmall" :label="$t('inventory.categoryType')" align="left" show-overflow-tooltip width="160"></el-table-column>
          <!-- <el-table-column prop="colChineseName" :label="$t('inventory.collateralName')"  align="left" show-overflow-tooltip width="120"> </el-table-column> -->
          <el-table-column prop="colCode" :label="$t('inventory.CertificateNo')" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="inveQuantity" :label="$t('inventory.num')" align="left">
            <template slot-scope="scope">
                <span>{{scope.row.inveQuantity}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="colUnit" :label="$t('inventory.unit')"  align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="inveDate" :label="$t('inventory.countingTime')" show-overflow-tooltip align="left"></el-table-column>
          <el-table-column prop="updateUserName" :label="$t('inventory.countingName')"  align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" :label="$t('inventory.status')" show-overflow-tooltip width="100" align="left">
            <template slot-scope="scope">
             <span >{{scope.row.status==1?'数量吻合':'数量不吻合'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="不通过原因" :min-width="100"  align="left" >
              <template slot-scope="scope">
                  <el-input
                    type="textarea"
                    :rows="1"
                    placeholder="请输入内容"
                    :disabled="selectId.includes(scope.row.id)"
                    v-model="scope.row.auditReason">
                    </el-input>
              </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="el_footbut">
          <span class="text"></span>
          <div>
              <el-form label-position="right" label-width="80px" >
                <el-form-item label="通过原因：" >
                <el-input type="textarea" oninput="if(value.length>100)value=value.slice(0,100)" :rows="2" v-model="idea" ></el-input>
                </el-form-item>
            </el-form>
            <div class="index_fbut" style="display: flex;justify-content: flex-end;">
                <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="sbumitData(1)">
                    {{ $t('table.sbumit') }}
                </el-button>
                <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="cancelbut">
                    {{ $t('table.cancel') }}
                </el-button>
            </div>
          </div>

      </div>
    </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import http from '@/api/http'

export default {
  name: '',
  components: { Pagination },
  directives: { waves },
  props: {
        dataList: {
            type: Array,
            default: []
        },
        taskId:{
            type:String,
            default:''
        }
    },
  data() {
    return {
      tableData: [],
      total: 0,
      tableHeight: 0,
      query:{},
      currentType:0,
      multipleSelection:[],
      selectId: [],
      // taskNo:this.$route.query.id||'',
      categoryList:[],
      smallList:[],
      idea:''
    }
  },

  created() {
      this.tableData = []
      this.tableData = this.dataList
    // this.getClassify()
    // this.getCategory()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 240
    })
  },
  methods: {
    getClassify(){
      this.tableData = []
      this.total = 0;
      this.pageNum = 1;
      switch (this.$route.path) {
          case '/vouchnewtask': this.currentType = '1'; break;
          case '/inventory':this.currentType = '2';break;
          default: break;
      }
      if(this.taskNo||this.currentType == '2'){
        this.currentType = '2'
        this.getData()
      }
    },
    getData() {
        http.post(`/colInventory/list`,{cpage:1,pageSize:99,taskNo:this.taskNo,...this.query}).then((res)=>{
            for(let item of res.data.list){
              // if(item.auditStatus==1&&this.taskNo==''){
              //   item.inveQuantity = ''
              // }
              item.auditReason = ''
            }
            this.tableData = res.data.list;
            // console.log(this.tableData);
            this.total = res.data.total || 0;
            this.$forceUpdate()
        }).catch(err=>{});
    },
    getCategory(){
      http.post(`/collateral/list`,{code:0}).then((res)=>{
          this.categoryList = res.data;
      }).catch(err=>{});
    },
    queryChange(code){
      http.post(`/collateral/list`,{code}).then((res)=>{
          this.smallList = res.data;
          this.query.colCodeSmall = ''
      }).catch(err=>{});
    },
    handleSearch(){
        this.getData()
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.selectId = []
      this.selectId = this.multipleSelection.map((v) => { return v.id })
      // 清空不可输入原因
      this.tableData.forEach((v) => {
        if (this.selectId.includes(v.id)) {
          this.$set(v,'auditReason', '')
        }
      })
      // auditReason
    },
    sbumitData(type){
    //   if(this.multipleSelection.length==0){
    //     this.$message.error('请勾选需抵(质)押品盘点的客户')
    //     return false
    //   }
    //   for(let item of this.multipleSelection){
    //     if(!item.inveQuantity){
    //       this.$message.error('请输入盘点数量')
    //       return false
    //     }
    //   }
    // for(let item of this.tableData){
    //     for(let j of this.multipleSelection){
    //         if(item.id!=j.id){

    //         }
    //     }
    // }
    const _arr1 =this.tableData.filter(item => !this.multipleSelection.includes(item));
    console.log(_arr1)
    let jsonPortion = []
    for(let item of _arr1){
        if(!item.auditReason){
            this.$message.error('请输入不通过原因')
            return false
        }
        jsonPortion.push({
            'auditReason':item.auditReason,
            'auditStatus':3,
            'id':item.id
        })
    }

    let per = {
        idea:this.idea,
        status:9,
        taskId:this.taskId
    }
    if(jsonPortion.length>0){
        per['jsonPortion'] = JSON.stringify(jsonPortion)
    }
      http.post(`/act/completeTask`,per).then((res)=>{
        this.$message.success('提交成功！');
        this.multipleSelection = []
        this.$refs.multipleTable.clearSelection();
        this.$emit('cancelButinv','1');
      }).catch(err=>{});
    },
    cancelbut(){
      this.multipleSelection = []
      this.$emit('cancelButinv');
    },
    headerStyle() {
      return 'tableStyle'
    },
    // selectEnable(row, rowIndex) {
    //   if (row.auditStatus==1||row.auditStatus==3) {
    //     return true;
    //   } else {
    //     return false;
    //   }
    // },
    getRowKeys(row){
      return row.id
    },
    backBut(){
      this.$emit('back');
    },
    forceInput(){
      this.$forceUpdate()
    }
  }
}
</script>
<style  lang="scss" scoped>
  .index_fbut{
    display: flex;
    .el-button--primary{
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }
  }
.el-table-column--selection .cell{
  text-align: center;
}

</style>
