<template>
  <div class="app-container">
    <div v-if="currentType==2">
        <div class="filter-container">
        <div class="container_item">
          <span class="item_text">客户名称：</span>
          <el-input v-model="query.custName"  class="filter-item input_item"  />
        </div>
        <!-- <div class="container_item">
          <span class="item_text">抵(质)押品名称：</span>
          <el-input v-model="query.title"  class="filter-item input_item" />
        </div> -->
        <div class="container_item">
        <span class="item_text">抵(质)押品大类：</span>
        <el-select v-model="query.colCodeLarge" @change="queryChange" placeholder="请选择" style="width: 130px;" class="filter-item input_item" >
          <el-option
            v-for="item in categoryList"
            :key="item.colCode"
            :label="item.chineseName"
            :value="item.colCode">
          </el-option>
        </el-select>
      </div>
      <div class="container_item">
        <span class="item_text">抵(质)押品细类：</span>
        <el-select v-model="query.colCodeSmall" @change="forceInput"  placeholder="请选择" style="width: 130px;" class="filter-item input_item" >
          <el-option
            v-for="item in smallList"
            :key="item.colCode"
            :label="item.chineseName"
            :value="item.colCode">
          </el-option>
        </el-select>
      </div>

        <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="handleSearch">
          {{ $t('table.search') }}
        </el-button>
        <el-button v-waves class="filter-item" type="primary" style="margin-right:10px;" icon="el-icon-my-reset" @click="resetHandle">
          {{ $t('table.reset') }}
        </el-button>
        <el-button v-waves  v-if="this.taskNo" class="filter-item" type="primary" icon="el-icon-my-reset" @click="backBut">
           {{$t('table.backBut')}}
        </el-button>
      </div>
      <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 v-if="taskNo==''" type="selection" width="45" :reserve-selection="true" :selectable="selectEnable" />
          <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">
            <!-- <div>
              <el-tooltip v-if="scope.row.custName.length>10" class="item" effect="dark" :content="scope.row.custName" placement="top">
                <span class="tab_span">{{scope.row.custName}}</span>
              </el-tooltip> -->
              <span >{{scope.row.custName}}</span>
            <!-- </div> -->
          </template>
          </el-table-column>
          <el-table-column prop="colCodeLargeName" :label="$t('levy.colCodeLarge')" show-overflow-tooltip width="115" align="left"></el-table-column>
          <el-table-column prop="colCodeSmallName" :label="$t('levy.colCodeSmall')" show-overflow-tooltip width="115" align="left"></el-table-column>
          <el-table-column prop="colCodeSmall" :label="$t('inventory.categoryType')" align="left" min-width="120" show-overflow-tooltip></el-table-column>
          <!-- <el-table-column prop="colChineseName" :label="$t('inventory.collateralName')"  align="left" min-width="110" show-overflow-tooltip> </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">
              <div v-if="scope.row.auditStatus==1||scope.row.auditStatus==3" style="line-height:11px;">
                <el-input class="tab-input flex-input" v-if="taskNo==''" type="number"  min="1" @change="inveQuantityNum($event,scope.row,scope.$index)" oninput ="value=value.replace(/[^\d]/g,'');if(value.length>10)value=value.slice(0,10);"  v-model.number="scope.row.inveQuantity" ></el-input>
                <span v-else>{{scope.row.inveQuantity}}</span>
              </div>
              <div v-else>
                <span>{{scope.row.inveQuantity}}</span>
              </div>
            </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>
            <template slot-scope="scope">
              <span v-if="scope.row.inveQuantity>0&&scope.row.isShow">{{scope.row.updateUserName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" :label="$t('inventory.status')" show-overflow-tooltip align="left" width="110">
            <template slot-scope="scope">
              <!-- if(item.auditStatus==1&&this.taskNo==''&&item.inveQuantity===0){ -->
              <!-- <template v-if="scope.row.auditStatus === 9">
                <span>{{scope.row.status==1?'数量吻合':'数量不吻合'}}</span>
              </template>
              <template v-else>
                <span></span>
              </template> -->
              <!-- <span> {{ scope.row.auditStatus }},{{ scope.row.status }}----inveQuantity:{{scope.row.inveQuantity}}</span> -->
             <span v-if="scope.row.auditStatus==9">{{scope.row.status==1?'数量吻合':'数量不吻合'}}</span>
             <!-- <span v-else-if="scope.row.inveQuantity>0 && scope.row.isShow && scope.row.auditStatus==3">{{scope.row.origQuantity == scope.row.inveQuantity?'数量吻合':'数量不吻合'}}</span> -->
             <span v-else-if="scope.row.inveQuantity>0 && scope.row.isShow">{{scope.row.origQuantity == scope.row.inveQuantity?'数量吻合':'数量不吻合'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" :label="$t('inventory.review')" show-overflow-tooltip align="left">
            <template slot-scope="scope">
             <span v-if="scope.row.auditStatus==1">盘点中</span>
             <span v-if="scope.row.auditStatus==5">审核中</span>
             <span v-if="scope.row.auditStatus==3">审核驳回</span>
             <span v-if="scope.row.auditStatus==9">盘点完成</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="el_footbut" v-if="taskNo==''">
          <span class="text">请勾选需要提交审批的抵(质)押品</span>
          <div class="index_fbut" style="display: flex;">
             <el-button v-if="permission.includes('inventory_submit')" 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> -->
            <el-button v-if="permission.includes('inventory_cache')" v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-baocun" @click="sbumitData(2)">
                {{ $t('table.temporary') }}
            </el-button>
          </div>
      </div>
    </div>
    <div v-else-if="currentType==1" style="display: flex;align-items: center;margin-top: 40px;flex-direction: column;">
      <p class="new_title">新建盘点任务</p>
      <div class="addnew">
        <img  src="../../assets/images/pandian.png" alt="" />
        <div class="filter-container timeinput">
          <el-form label-position="right" label-width="120px" :model="query">
              <el-form-item label="盘点起日：" class="require">
                <el-date-picker
                v-model="query.startDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
              </el-form-item>
           </el-form>
            <el-form label-position="right" label-width="120px" :model="query">
              <el-form-item label="盘点止日：" class="require">
                <el-date-picker
                v-model="query.endDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
              </el-form-item>
            </el-form>
        </div>

       </div>
       <div class="dialog-footer newbut">
            <el-button v-if="permission.includes('vouchnew_task_submit')" v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="sbumitTime">
                {{ $t('table.sbumit') }}
            </el-button>
            <!-- <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" >
                {{ $t('table.cancel') }}
            </el-button> -->
        </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import http from '@/api/http'
import { getName } from '@/utils/auth'
export default {
  name: '',
  components: { Pagination },
  directives: { waves },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  props: {
      taskNo: {
        type: String,
        default: ''
      },
    },
  data() {
    return {
      tableData: [],
      total: 0,
      tableHeight: 0,
      query:{},
      currentType:0,
      multipleSelection:[],
      // taskNo:this.$route.query.id||'',
      categoryList:[],
      smallList:[],
      queryTaskNo: ""
    }
  },

  watch: {
      $route(){
        this.getClassify()
      },
  },
  created() {
    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';this.query.auditStatus=1; break;
          case '/inventory':this.currentType = '2';this.query.auditStatus=3;break;
          default: break;
      }
      if(this.taskNo||this.currentType == '2'){
        this.currentType = '2'
        this.getData()
      }
    },
    getData() {
      console.log(this.query);

      let params = {
        cpage: 1,
        pageSize: 99,
        ...this.query,
        taskNo: this.queryTaskNo ? this.queryTaskNo : this.taskNo,
        // auditStatus: 3
      }
      http.post(`/colInventory/list`, params).then((res)=>{
          for(let item of res.data.list){
            if(item.auditStatus==1&&this.taskNo==''&&item.inveQuantity===0){
              item.inveQuantity = ''
              item.isShow = false
            }else{
              item.isShow = true
            }
          }
          this.tableData = res.data.list;

          console.log();
          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=>{});
    },
    resetHandle() {
      Object.keys(this.query).forEach((v) => {
        if (v !== 'auditStatus') {
          this.query[v] = undefined
        }
      })
      this.getData()
    },
    handleSearch(){
      this.getData()
    },
    // 多选操作
    handleSelectionChange(val) {
        this.multipleSelection = val;
    },
    sbumitTime(){
      if(!this.query.startDate){
        this.$message.error('请选择盘点起日')
        return false
      }
      if(!this.query.endDate){
        this.$message.error('请选择盘点止日')
        return false
      }
      if( new Date(this.query.startDate)> new Date(this.query.endDate)){
        this.$message.error('盘点起日不能大于盘点止日')
        return false
      }
      http.post(`/colInventory/add`,{endDate:this.query.endDate,startDate:this.query.startDate}).then((res)=>{
        if(res.data.list.length === 0){
          this.$message.error('抵(质)押品都在盘点中')
          return false
        }
        for(let item of res.data.list){
            if(item.auditStatus==1){
              item.inveQuantity = ''
            }
          }
        this.tableData = res.data.list;
        this.total = res.data.total || 0;
        this.queryTaskNo = res.data.list[0].taskNo ? res.data.list[0].taskNo : ""
        this.currentType = '2'
        this.getData()
      }).catch(err=>{});
    },
    sbumitData(type){
      let url = '',list=[]
      if(type==1){
        if(this.multipleSelection.length==0){
          this.$message.error('请勾选需要提交审批的抵(质)押品')
          return false
        }
        for(let item of this.multipleSelection){
          if(!item.inveQuantity){
            this.$message.error('请输入盘点数量')
            return false
          }
        }
        list = this.multipleSelection
        url = `/colInventory/inventory`
      }else{
        for(let item of this.tableData){
          if(item.inveQuantity&&item.auditStatus==1||item.inveQuantity&&item.auditStatus==3){
            list.push(item)
          }
        }
        url =`/colInventory/tempSave`
      }
      // 请输入盘点数量
      if (list.length === 0) {
        this.$message.error('请输入盘点数量')
        return
      }
      http.post(url,{list:list}).then((res)=>{
        this.$message.success('提交成功！');
        this.multipleSelection = []
        this.$refs.multipleTable.clearSelection();
        this.getData();
      }).catch(err=>{});
    },
    cancelbut(){
      this.multipleSelection = []
    },
    inveQuantityNum(e,data,index){
      data.isShow = true
      data.updateUserName = getName()
      data.inveQuantity = e
      this.$set(this.tableData,index,data)
    },
    headerStyle({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        return 'tableStyle header-sel'
      } else {
        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>
::v-deep .el-form .el-form-item .el-form-item__label{
  font-size: 14px;
}


.index_fbut{
  display: flex;
  .el-button--primary{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}
.addnew{
  width: 842px;
  height: 397px;
  border: 1px solid #D3D3D3;
  border-radius: 4px 4px 0px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .timeinput{
    margin-top: 25px;
  }
  img{
    width: 325px;
  }
}
.new_title{
  font-size: 16px;
  font-family: "SourceHanSansCN";
  font-weight: bold;
  color: #212121;
  width: 842px;
}
.newbut{
    width: 842px;
    margin-top: 16px;
}
.el-table {
   ::v-deep .header-sel {
    > .cell {
      padding-left: 15px!important;
    }
  }
}
</style>
