<!-- 合同付款详情 -->
<template>
  <div class="container-wrap">
    <div style="display: flex;justify-content: space-between;align-items: center;padding: 2px 0">
      <div>
        <span @click="typeClick(4)" :style="{color: type === 4 ? 'blue' : ''}" style="text-decoration: underline;cursor: pointer">最新人工盘点</span>
        <span style="padding: 0 10px">|</span>
        <span @click="typeClick(3)" :style="{color: type === 3 ? 'blue' : ''}" style="text-decoration: underline;cursor: pointer">最新自动盘点</span>
      </div>
      <div>
        <Button @click="more" style="margin-right: 10px">更多记录>></Button>
        <span style="font-size: 12px;font-weight: normal;cursor: pointer;" @click="$router.back()">
          <Icon type="ios-arrow-dropleft" size="16"/>
          返回上一级
        </span>
      </div>
    </div>
    <div class="container">
      <div class="tabs">
        <div
          @click="tabClick(index, item.value)"
          :class="tabsIndex === index ? 'active' : ''"
          class="tab-item"
          v-for="(item, index) in tabs"
          :key="index">
          {{ item.text }}
        </div>
      </div>
      <div class="table-filter">
        <div class="filter-item">
          <Button
            :type="menuIndex === '' ? 'primary' : 'default'"
            style="width: 90px;" @click="menuTabClick('')">
            全部
          </Button>
        </div>
        <div class="filter-item" v-for="(item, index) in data.purposeList" :key="index">
          <Button
            :type="menuIndex === index ? 'primary' : 'default'"
            style="min-width: 90px;"
            @click="menuTabClick(index, item)">
            {{ item }}
          </Button>
        </div>
      </div>
      <div class="filter">
        <RadioGroup v-model="params.checkResult" @on-change="stateChange">
          <Radio label="">
            全部
            <span style="color: #3F92F9">（{{ (data.normalCount + data.errorCount) || 0 }}）</span>
          </Radio>
          <Radio :label="1">
            盘点结果一致
            <span style="color: #3F92F9">（{{ data.normalCount || 0 }}）</span>
          </Radio>
          <Radio :label="0">
            盘点结果不一致
            <span style="color: #f11111">（{{ data.errorCount || 0 }}）</span>
          </Radio>
        </RadioGroup>
      </div>
      <!-- 表格 -->
      <div class="table-content">
        <my-table :data="data.checkRecordDetialList && data.checkRecordDetialList.list" :border="true" :tooltip="false" :columns="columns" :isShowFilter="false" :table-page="params" @on-change="changePage"></my-table>
      </div>
    </div>
    <tag-form v-model="show" :form-data="currentData"></tag-form>
  </div>
</template>

<script>
import { GetCheckRecordDetailList } from '@/api/stock'
import MyTable from '_c/my-table/my-table'
import TagForm from '@/view/store-manage/store-manage/tag-form'
import { GetTechnologyTypList } from '@/api/baseData'
export default {
  name: 'material_pay_detail',
  components: {
    MyTable,
    TagForm
  },
  data () {
    return {
      show: false,
      currentData: {},
      recordId: '',
      type: 4,
      technologyType: '',
      tabs: [],
      tabsIndex: 0,
      menuIndex: '',
      titleData: {},
      data: {
        checkRecordDetialList: {}
      },
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '类型',
          key: 'categoryName',
          minWidth: 150
        },
        {
          title: '用途',
          key: 'purpose',
          minWidth: 150
        },
        {
          title: '物料编码',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150
        },
        {
          title: '库存件数',
          key: 'stockCount',
          minWidth: 150
        },
        {
          title: '扫描件数',
          key: 'scanfCount',
          minWidth: 150,
          render: (h, params) => {
            return h('span', {
              style: {
                color: params.row.scanfCount !== params.row.stockCount ? 'red' : ''
              }
            }, params.row.scanfCount)
          }
        },
        {
          title: '盘点件数',
          key: 'handCount',
          minWidth: 150,
          render: (h, params) => {
            return h('span', {
              style: {
                color: params.row.handCount !== params.row.stockCount ? 'red' : ''
              }
            }, params.row.handCount)
          }
        },
        {
          title: '盘点结果',
          key: 'result',
          minWidth: 150,
          render: (h, params) => {
            return h('span', {
              style: {
                color: params.row.result !== '正常' ? 'red' : ''
              }
            }, params.row.result)
          }
        },
        {
          title: '标签详情',
          key: 'detialId',
          minWidth: 150,
          render: (h, params) => {
            let _this = this
            return h('a', {
              on: {
                click () {
                  _this.currentData.detialId = params.row.detialId
                  _this.currentData.materialName = params.row.materialName
                  _this.show = true
                }
              }
            }, '查看详情')
          }
        },
        {
          title: '盘点时间',
          key: 'checkTime',
          minWidth: 150
        },
        {
          title: '盘点人',
          key: 'checkUser',
          minWidth: 150
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    more () {
      this.$router.push('inventory_record')
    },
    typeClick (type) {
      this.params.pageIndex = 1
      this.menuIndex = ''
      this.tabsIndex = 0
      this.params.purpose = ''
      this.technologyType = ''
      this.params.checkResult = ''
      this.type = type
      this.recordId = ''
      this.getList()
    },
    /* 用途点击 */
    menuTabClick (index = '', item = '') {
      this.menuIndex = index
      this.params.pageIndex = 1
      this.params.purpose = item
      this.getList()
    },
    /* 单选框切换 */
    stateChange () {
      this.params.pageIndex = 1
      this.getList()
    },
    /* 选项卡切换 */
    tabClick (index, value) {
      this.data = {
        allStockCheckPageList: {}
      }
      this.tabsIndex = index
      this.params.pageIndex = 1
      this.params.isCountEqual = ''
      this.technologyType = value
      this.getList()
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      /* 盘点记录 */
      GetCheckRecordDetailList({
        ...this.params,
        technologyType: this.technologyType,
        type: this.type,
        recordId: this.recordId
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result
          this.params.total = res.result.checkRecordDetialList.totalCount
        }
      })
    },
    getTechnologyTypList () {
      GetTechnologyTypList().then(res => {
        if (res.code === 0) {
          this.tabs = res.result
          this.tabs.unshift({
            text: '全部',
            value: ''
          })
        }
      })
    }
  },
  mounted () {
    this.recordId = this.$route.query.recordId || ''
    this.type = this.$route.query.type || 4
    this.technologyType = this.$route.query.technologyType
    if (this.type) {
    }
    if (this.technologyType || this.technologyType === 0) {
      this.tabsIndex = (this.technologyType + 1)
    }
    this.getList()
    this.getTechnologyTypList()
  }
}
</script>

<style lang="less" scoped>
.container-wrap {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .container {
    flex: 1;
    overflow: hidden;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    .tabs {
      box-sizing: border-box;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tab-item {
        box-sizing: border-box;
        flex: 1;
        overflow: auto;
        border-right: 1px solid #dcdee2;
        border-bottom: 1px solid #dcdee2;
        text-align: center;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        &:last-child {
          border-right: none;
        }
        &.active {
          color: #3F92F9;
          border-bottom: 3px solid #3F92F9;
        }
      }
    }
    .filter {
      margin-bottom: 5px;
      padding: 0 20px;
      font-weight: bold;
    }
    .table-filter {
      margin: 5px 20px;
      overflow: hidden;
      max-height: 200px;
      overflow: auto;
      .filter-item {
        padding: 5px 0;
        margin-right: 10px;
        float: left;
        //&:last-child {
        //  margin-right: 0;
        //}
      }
    }
    .table-content {
      flex: 1;
      padding: 10px 20px;
      padding-top: 0;
      overflow: hidden;
      .table-item {
        width: 100%;
        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .col {
            padding: 0 5px;
            flex: 1;
            display: flex;
            align-items: center;
            height: 30px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            &.red {
              color: red;
            }
            &.orange {
              color: orange;
            }
            &.blue {
              color: #169bd5;
            }
          }
        }
      }
      .content {
        padding-left: 30px;
      }
    }
  }
}
/deep/ .ivu-table-cell {
  padding: 0 6px;
}
</style>
