<template>
  <div class="mod-config">
    <el-form :inline="true" style="display: flex; align-items: center; justify-content: right;">
      <el-form-item style="flex: 1;float: left">
        <el-button size="small" type="primary" @click="addOrUpdateHandle()">
          <icon-svg class="iconClass" name="新建"></icon-svg>
          新增
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-select v-model="processType" size="small" placeholder="加工类型" clearable>
          <el-option :value="0" label="初始加工" />
          <el-option :value="1" label="复加工" />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left:1%">
        <el-select v-model="startPosition" size="small" placeholder="任务起点位置" clearable>
          <el-option value="YYT001" label="液压台1" />
          <el-option value="YYT002" label="液压台2" />
          <el-option value="YYT003" label="液压台3" />
          <el-option value="YYT004" label="液压台4" />
        </el-select>
        <!-- <el-button style="margin-left:10px" type="primary" @click="getPoint(0)">{{startPosition}}</el-button> -->
      </el-form-item>
      <el-form-item style="margin-left:1%">
        <el-select v-model="kilnId" size="small" placeholder="工业炉" clearable>
          <el-option v-for="item in eqList" :key="item.id" :value="item.id" :label="item.kilnName" />
        </el-select>
        <!-- <el-button style="margin-left:10px" type="primary" @click="getPoint(1)">{{kilnId}}</el-button> -->
      </el-form-item>
        <el-form-item>
          <el-select v-model="craftCode" placeholder="工艺">
            <el-option v-for="item in processList" :key="item.id" :value="item.code" :label="item.craftCode" />
          </el-select>
        </el-form-item>
      <el-form-item style="margin-left:1%">
        <el-button type="primary" size="small" :loading="btnLoad" @click="submitTask()">提交任务</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      :stripe="true"
      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        type="index"
        header-align="center"
        align="center"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="idenCardNum"
        label="标识卡">
      </el-table-column>
      <el-table-column
        prop="customerName"
        label="客户名称">
      </el-table-column>
      <el-table-column
        prop="orderNo"
        label="订单号">
      </el-table-column>
      <el-table-column
        prop="productName"
        label="产品名称">
      </el-table-column>
      <el-table-column
        prop="materialDes"
        label="材料号牌">
      </el-table-column>
      <el-table-column
        prop="finishQuantity"
        label="已完成数">
        <template slot-scope="scope">
          {{ `${scope.row.finishQuantity}/${scope.row.targetQuantity}` }}
        </template>
      </el-table-column>
      <el-table-column
        prop="quantity"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="weight"
        label="重量">
      </el-table-column>
      <el-table-column
        prop="unit"
        label="单位">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row, scope.$index)">
            <el-tooltip class="item" effect="dark" content="修改" placement="top">
              <icon-svg class="iconClass" name="编辑"></icon-svg>
            </el-tooltip>
          </el-button>
          <el-button type="text" style="color:red" size="small" @click="deleteHandle(scope.$index)">
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <icon-svg class="iconClass" name="删除"></icon-svg>
            </el-tooltip>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <process-point v-if="processPointVisible" ref="processPoint" @refreshPoint="setPoint"></process-point>
  </div>
</template>

<script>
  import AddOrUpdate from './order-process-add'
  import ProcessPoint from './order-process-point'
  export default {
    data () {
      return {
        btnLoad: false,
        startPosition: '',
        kilnId: '',
        craftCode: '',
        targetPosition: '',
        dataList: [],
        processType: null,
        dataListLoading: false,
        addOrUpdateVisible: false,
        processPointVisible: false,
        eqList: [],
        processList: []
      }
    },
    components: {
      AddOrUpdate,
      ProcessPoint
    },
    activated () {
      this.getEqList()
    },
    methods: {
      // 获取工业炉列表
      getEqList () {
        this.$http({
          url: this.$http.adornUrl('/kilnInfo/page'),
          method: 'post',
          data: this.$http.adornData({
            current: 1,
            size: 999
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.eqList = data.data.records
          } else {
            this.eqList = []
          }
          this.getDataList()
        })

        this.$http({
          url: this.$http.adornUrl('/craftInfo/page'),
          method: 'post',
          data: this.$http.adornData({
            current: 1,
            size: 999
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.processList = data.data.records
          } else {
            this.processList = []
          }
        })
      },
      // 获取数据列表
      getDataList () {
        this.dataList = sessionStorage.getItem('taskList') ? JSON.parse(sessionStorage.getItem('taskList')) : []
        // if (data && data.code === 0) {
        //   this.dataList = data.data.records
        // } else {
        //   this.dataList = []
        // }
      },
      // 新增 / 修改
      addOrUpdateHandle (row, idx) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(row, idx)
        })
      },
      // 获取点位
      getPoint (pointType) {
        this.processPointVisible = true
        this.$nextTick(() => {
          this.$refs.processPoint.init(pointType)
        })
      },
      setPoint (count, pointType) {
        if (!pointType) {
          this.startPosition = count
        } else {
          this.kilnId = count
          this.targetPosition = count
        }
      },
      submitTask () {
        if (this.dataList.length === 0) {
          this.$message({
            message: '任务为空，请新增一条托盘信息',
            type: 'warning'
          })
        } else if (!this.startPosition) {
          this.$message({
            message: '请选择任务起点',
            type: 'warning'
          })
        } else if (!this.kilnId) {
          this.$message({
            message: '请选择工业炉',
            type: 'warning'
          })
        } else if (!this.craftCode) {
          this.$message({
            message: '请选择工艺',
            type: 'warning'
          })
        } else if (this.processType !== 0 && this.processType !== 1) {
          this.$message.warning('请选择加工类型')
        } else {
          this.btnLoad = true
          this.$confirm(`确定提交任务?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl(`/currTask/createProcessTask`),
              method: 'post',
              data: this.$http.adornData({
                craftCode: this.craftCode,
                detParams: this.dataList,
                kilnId: this.kilnId,
                processType: this.processType,
                startPosition: this.startPosition,
                targetPosition: this.kilnId
                // this.targetPosition
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message.success('任务提交成功')
                this.btnLoad = false
                this.dataList = []
                sessionStorage.setItem('taskList', '')
                this.startPosition = '选择起点'
                this.kilnId = '选择工业炉'
                this.targetPosition = null
              } else {
                this.btnLoad = false
                this.$message.warning(data.msg)
              }
            })
          }).catch(() => {})
        }
      },
      // 删除
      deleteHandle (idx) {
        console.log(idx)
        this.$confirm(`确定对第${idx + 1}项进行删除操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dataList.splice(idx, 1)
          sessionStorage.setItem('taskList', JSON.stringify(this.dataList))
        }).catch(() => {})
      }
    }
  }
</script>
