<template>
  <view class="dmodel-table">
    <u-button type="primary" size="mini" @click="commonClick('1')">上机</u-button>
    <u-button style="margin-left: 20rpx" type="success" size="mini" @click="commonClick('2')">下机</u-button>
    <u-button style="margin-left: 20rpx" type="success" size="mini" @click="handleScancode('1')">上机扫描</u-button>
    <u-button style="margin-left: 20rpx" type="success" size="mini" @click="handleScancode('2')">下机扫描</u-button>
    <zb-table :columns="tableColumn" :data="tableData" :isTrClassStyle="isTrClassStyle" :stripe="true" @toggleAllSelection="toggleAllSelection" @toggleRowSelection="toggleRowSelection">
     <template slot="slot" slot-scope="scope">
       <u-tag :text="scope.row.typeName" :type="getTag(scope.row)"></u-tag>
     </template>
    </zb-table>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  dicts: ['TOOL_MACHINES_TYPE'],
  data() {
    return {
      tableSelectData: [],
      tableColumn: [
        {
          type: 'selection',
          width: 35
        },
        {
          type: 'slot',
          name: 'typeName',
          label: '状态',
          width: 80
        },
        {
          name: 'toolCode',
          label: '刀模版sn码',
          width: 80
        },

        {
          name: 'toolName',
          label: '刀模版名称',
          width: 80
        },
        {
          name: 'itemName',
          label: '物料名称',
          width: 80
        },
        {
          name: 'upDate',
          label: '上机时间',
          width: 130
        },
        {
          name: 'downDate',
          label: '下机时间',
          width: 130
        }
      ],
    };
  },
  computed: {
    tableData() {
      return this.data || [];
    }
  },
  mounted () {
    
  },
  methods: {
    isTrClassStyle(row, i) {

      if (row.typeName === '已上机') {
        return 'green'; //暂停
      } else {
        return ''; //第二个大
      }
    },
    getTag(row) {
      console.log(row, 'row')
      const obj = {
        '1': 'primary',
        '2': 'success',
        '3': 'info'
      }
      let option = this.dict.type.TOOL_MACHINES_TYPE.map(item => {
          return {
            ...item,
            type: obj[item.value]
          }
      })
      let type = ''
      option.forEach(item => {
        console.log(item , 'item')
         if (item.value == row.type) {
           type = item.type
         }
      })
      console.log(type, 'type')
      return type
    },
    async commonClick(type) {
      if (this.tableSelectData.length == 0) {
        return this.$u.toast('请选择一条数据！');
      }
      // 判断选中的类型是否一致
      if (this.tableSelectData.length > 1) {
        let flag = false;
        for (let i = 1; i < this.tableSelectData.length; i++) {
          const pre = this.tableSelectData[i - 1];
          const cur = this.tableSelectData[i];
          flag = cur.type == pre.type;
          if (!flag) {
            break;
          }
        }
        if (!flag) {
          return this.$u.toast('请选择状态相同的数据');
        }
      }
      const params = this.tableSelectData.map((v) => {
        return {
          toolMachinesId: v.toolMachinesId,
          type
        };
      });
      const { code } = await this.$u.api.dModel.tmToolMachinesRecord(params);
      if (code == 200) {
        this.$emit('action');
      }
    },
    handleScancode(type) {
      this.$emit('scan', type)
      // uni.scanCode({
      //   success: (res) => {
      //     console.log(res, 'res7778888');
      //     this.$u.api.dModel.tmToolMachinesScancode({ type, sn: res.result }).then((res) => {
      //       // console.log(res, 'res333')
      //       if (res.code === 200) {
      //         this.$emit('action');
      //       }
      //     });
      //   }
      // });
    },
    toggleAllSelection(checked, arr) {
      this.tableSelectData = arr;
    },
    toggleRowSelection(checked, arr) {
      this.tableSelectData = arr;
    }
  }
};
</script>

<style scoped lang="scss">
.dmodel-table {
  height: 500rpx;
  margin-top: 20rpx;
  padding: 0 20rpx;
  /deep/ .item-tr.green .item-td {
    background: #19be6b !important;
  }
}
</style>
