<template>
  <div class="mod-config">
    <div class="auto-session">
      <el-row style="margin: 10px 0; font-weight: bold">
        未下发自动任务
      </el-row>
      <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 style="margin-left:1%">
          <el-button type="primary" size="small" @click="handleSubmit()">提交任务</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        :stripe="true"
        :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
        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>
    </div>
    <div class="auto-undo" v-if="false">
      <el-row style="margin: 10px 0; font-weight: bold">
        未完成自动任务
      </el-row>
      <el-table
        :data="autoList"
        :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="processFlowType"
          label="自动任务类型">
          <template slot-scope="scope">
            {{ scope.row.processFlowType === 1 ? '淡化炉加工' : scope.row.processFlowType === 2 ? '多功能炉加工' : '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
          <template slot-scope="scope">
            {{ scope.row.status === 0 ? '未开始' : scope.row.status === 1 ? '执行中' : scope.row.status === 2 ? '完成' : scope.row.status === 3 ? '终止' : '' }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="详情">
          <template slot-scope="scope">
            <el-button type="text" @click="handleAutoDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column> -->
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" style="color:red" size="small" @click="stopHandle(scope.row.id)">
              <el-tooltip class="item" effect="dark" content="停止" placement="top">
                <icon-svg class="iconClass" name="stop"></icon-svg>
              </el-tooltip>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
    <process-point v-if="processPointVisible" ref="processPoint" @refreshPoint="setPoint" />
    <submit-form v-if="submitFormVisible" ref="submitForm" :kilnList="eqList" :processList="processList" @refreshDataList="getDataList" />
    <auto-detail v-if="autoDetailVisible" ref="autoDetail" />
  </div>
</template>

<script>
  import AddOrUpdate from './order-auto-add'
  import SubmitForm from './order-auto-submit'
  import ProcessPoint from './order-process-point'
  import AutoDetail from './order-auto-detail'
  export default {
    data () {
      return {
        startPosition: '',
        kilnId: '',
        targetPosition: '',
        dataList: [],
        autoList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        processType: null,
        addOrUpdateVisible: false,
        processPointVisible: false,
        submitFormVisible: false,
        autoDetailVisible: false,
        eqList: [],
        processList: []
      }
    },
    components: {
      AddOrUpdate,
      ProcessPoint,
      SubmitForm,
      AutoDetail
    },
    activated () {
      this.getDictList()
      this.getDataList()
      this.getAutoDataList()
    },
    methods: {
      // 获取工业炉、工艺列表
      getDictList () {
        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.$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 = []
          }
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getAutoDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getAutoDataList()
      },
      // 获取数据列表
      getDataList () {
        this.dataList = sessionStorage.getItem('autoTaskList') ? JSON.parse(sessionStorage.getItem('autoTaskList')) : []
        // if (data && data.code === 0) {
        //   this.dataList = data.data.records
        // } else {
        //   this.dataList = []
        // }
      },
      // 获取已下发自动任务
      getAutoDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/autoTask/page'),
          method: 'post',
          data: this.$http.adornData({
            'current': this.pageIndex,
            'size': this.pageSize
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.autoList = data.data.records
            this.totalPage = data.data.total
          } else {
            this.autoList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 新增 / 修改
      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
        }
      },
      // 弹出提交任务弹窗
      handleSubmit () {
        if (this.dataList.length) {
          this.submitFormVisible = true
          this.$nextTick(() => {
            this.$refs.submitForm.init(this.dataList)
          })
        } else {
          this.$message.warning('请至少添加一条任务！')
        }
      },
      handleAutoDetail (id) {
        this.autoDetailVisible = true
        this.$nextTick(() => {
          this.$refs.autoDetail.init(id)
        })
      },
      // 删除
      deleteHandle (idx) {
        console.log(idx)
        this.$confirm(`确定对第${idx + 1}项进行删除操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dataList.splice(idx, 1)
          sessionStorage.setItem('autoTaskList', JSON.stringify(this.dataList))
        }).catch(() => {})
      },
      // 终止自动任务
      stopHandle (id) {
        this.$confirm(`确定对[id=${id}]进行停止操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/autoTask/stop'),
            method: 'post',
            data: this.$http.adornData({id})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {})
      }
    }
  }
</script>
