<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select @change="idGroupChange" v-model="idGroup" filterable placeholder="选择反馈组">
        <el-option
          style="max-height: 240px;overflow-y: auto;"
          v-for="item in machineInfList"
          :key="item.id"
          :label="item.groupName"
          :value="item.id">
        </el-option>
      </el-select>
      <el-input v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item"/>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
    </div>
    <div class="table-con rowHoverNone">
      <el-table
        size="mini"
        max-height="680"
        :data="tableData"
        v-loading="listLoading"
        @row-click="handleSendBillClickTableRow"
        :row-style="customRowStyle"
        :row-class-name="rowClassName"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
      >
        <el-table-column
          label="序号"
          fixed
          width="70px">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" width="100" fixed class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button  @click="feedbackBtn(row)" size="mini" type="primary" plain v-if="row.btnVal=='验收'">验收</el-button>
            <el-button @click="feedbackBtn(row)" size="mini" type="success" v-if="row.btnVal=='开始'">开始</el-button>
            <el-button @click="feedbackBtn(row)" size="mini" type="warning" v-if="row.btnVal=='结束'">结束</el-button>
            <el-button @click="feedbackBtn(row)" size="mini" type="primary" v-if="row.btnVal=='交接'">交接</el-button>
            <el-button :disabled="true" size="mini" type="info" v-if="row.btnVal=='已完成'">已完成</el-button>


          </template>
        </el-table-column>


        <el-table-column
          fixed
          label="工序名称"
        >
          <template slot-scope="scope">
            <span @click="handleShowStep(scope.row.idCraftBill,scope.row.craftBill.idOriginFactory,scope.row.craftBill.originOrderCode)" style="color: #409EFF;cursor: pointer">{{scope.row.craftName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="工序尺寸"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.processSize }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="breedCutSize"
          label="展开尺寸">
        </el-table-column>
        <el-table-column
          width="120"
          show-overflow-tooltip
          prop="printName"
          label="印品名称">
          <template slot-scope="{row}">
            <span v-html="row.craftBill.printName"></span>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          prop="productName"
          label="产品类型">
          <template slot-scope="{row}">
            <span v-html="row.craftBill.productName"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="原订单所有后工"
          width="150"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            {{row.craftBill.origOrderAllProcess}}
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          prop="originOrderSendKind"
          label="订单发货方式">
          <template slot-scope="{row}">
            <span v-html="row.craftBill.originOrderSendKind"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="工序数量"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.processNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="反馈状态" align="center" width="110px" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-tag size="mini" type="info" v-if="row.processState==0">待排产</el-tag>
            <el-tag size="mini" type="danger" v-if="row.processState==1">待验收</el-tag>
            <el-tag size="mini" type="warning" v-if="row.processState==2">待生产</el-tag>
            <el-tag size="mini" type="primary" v-if="row.processState==3">待完工</el-tag>
            <el-tag size="mini" type="success" v-if="row.processState==4">待流转</el-tag>
            <el-tag size="mini" type="" v-if="row.processState==10">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="原订单消息"
          width="140"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            <template v-if="row.craftBill.originOrderMessage">
                        <span
                          style="color: #20a0ff; cursor: pointer"
                          @click.stop="openOriginOrderMessage(row)"> {{ row.craftBill.originOrderMessage }}</span>
            </template>
            <template v-else>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="交货日期"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{row.craftBill.expectedDeliverDate | getTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单制单日期"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{ row.craftBill.originOrderSubmitTime  | getTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="工序备注"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.processMemo }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="加工单工序"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.processCost }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单编号"
          width="120px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.craftBill.originOrderCode }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="覆膜反馈状态"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{ row.craftBill.coveringState }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="模切反馈状态"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{ row.craftBill.cuttingState }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="成型反馈状态"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{ row.craftBill.moldingState }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="外协单号"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{ row.craftBill.originOutAssistBill }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="印品名称"
          show-overflow-tooltip
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{ row.craftBill.printName }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="客户名称"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{row.craftBill.customerName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          label="外加工单号"
        >
          <template slot-scope="scope">
            <span @click="getBillStep(scope.row)" style="color: #409EFF;cursor: pointer">{{scope.row.craftBill.billCode}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="验收日期"
          width="130px"
        >
          <template slot-scope="{row}">
            <span></span>
          </template>
        </el-table-column>
        <el-table-column
          label="加工单备注"
          width="200px"
        >
          <template slot-scope="{row}">
            <el-popover
              placement="top-start"
              width="400"
              trigger="hover"
              :content="row.craftBill.billMemo">
              <span slot="reference" style="width: 200px" class="ellipsis"> {{ row.craftBill.billMemo }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="施工单号"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{ row.craftBill.originPrintBillCode}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page"
                  :limit.sync="listData.pageSize" @pagination="getTableInfo"/>

      <div v-if="processListShow" style="margin-top: 10px">
        <el-table
          class="dropTable"
          size="mini"
          :data="processListData"
          tooltip-effect="dark"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          default-expand-all>
          <el-table-column
            label="#"
            width="50px">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            label="加工单号"
          >
            <template slot-scope="scope">
              <span>{{scope.row.billCode}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="工序名称"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.craftName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="反馈状态" align="center" width="110px" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-tag size="mini" type="info" v-if="row.processState==0">待排产</el-tag>
              <el-tag size="mini" type="danger" v-if="row.processState==1">待验收</el-tag>
              <el-tag size="mini" type="warning" v-if="row.processState==2">待生产</el-tag>
              <el-tag size="mini" type="primary" v-if="row.processState==3">待完工</el-tag>
              <el-tag size="mini" type="success" v-if="row.processState==4">待流转</el-tag>
              <el-tag size="mini" type="" v-if="row.processState==10">已完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="反馈组"
          >
            <template slot-scope="scope">
                <span>{{ scope.row.feedbackGroupName}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="工序数量"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.processNum }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="已反馈数量"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.feedbackNum }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="工序尺寸"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.processSize }}</span>
            </template>
          </el-table-column>


          <el-table-column
            label="工序备注"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.processMemo }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog title="反馈" width="500px" :visible.sync="dialogFormVisible">
      <el-form  :model="form">
        <el-form-item label="反馈数量" :label-width="formLabelWidth">
          <el-input oninput = "value=value.replace(/[^\d.]/g,'')" v-model.trim="form.feedbackNum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="feedbackBtnSure">确 定</el-button>
      </div>
    </el-dialog>
    <bill-step ref="billStep"></bill-step>
    <craft-detail ref="craftDetail"></craft-detail>
    <el-drawer
      title="原订单消息"
      :reverse="true"
      :visible.sync="memoDrawer"
      size="600px">
      <originorder-message ref="originorderMessage"></originorder-message>
    </el-drawer>
  </div>
</template>

<script>
import {
  queryBillProcessFeedback,
  feedbackProcess,
  getFeedbackGroupList
} from '@/api/outsideFactory/processFeedback/index.js'
// import {queryFeedbackGroupWithTasks} from "@/api/outsideFactory/processTos";
import BillStep from '@/components/billStep/billStep'
import CraftDetail from "@/components/craftDetail/craftDetail";
import Cancledialog from "@/components/Dialog/Cancledialog";
import Pagination from "@/components/Pagination/index";
import originorderMessage from '@/views/feedBack/orderMessage/originorderMessage'

export default {
  name: "list",
  components: {
    BillStep,
    CraftDetail,
    originorderMessage
  },
  data() {
    return {
      memoDrawer:false,
      processTitle:"反馈",
      processState:"",
      idGroup:"",
      processListShow:false,
      processListData:[],
      rowIndex: '',
      formLabelWidth: '120px',
      rowData:{},
      form:{
        'feedbackNum':0
      },
      dialogFormVisible:false,
      machineInfList: [],
      listLoading: false,
      tableData: [],
      search: {
        keyWord: ''
      },
      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      }
    }
  },
  mounted() {

    this.getMachine();
  },
  methods: {
    openOriginOrderMessage(row){
      var _that = this
      _that.memoDrawer = true;
      _that.rowData = row;
      _that.$nextTick(function () {
        // console.log(_that.$refs.orderMemo);
        _that.$refs.originorderMessage.idOriginFactory = row.craftBill.idOriginFactory;
        _that.$refs.originorderMessage.originOrderId = row.craftBill.originOrderId;
        _that.$refs.originorderMessage.getList()
      })
    },
    handleShowStep(id,idOriginFactory,originOrderCode){
      const _that = this;
      _that.$refs.craftDetail.idBill = id;
      _that.$refs.craftDetail.activeName = "first";
      _that.$refs.craftDetail.idOriginFactory = idOriginFactory;
      _that.$refs.craftDetail.orderCode = originOrderCode;
      _that.$refs.craftDetail.getDetail();
      _that.$refs.craftDetail.getOrderDetail();
    },
    getBillStep(row){
      const _that = this;
      _that.$refs.billStep.idOrder = row.craftBill.id
      _that.$refs.billStep.getBillStep()
    },
    customRowStyle({row, rowIndex}) {
      // if (row.voidFlag === 1) {
      //   return {
      //     color: '#F56C6C'
      //   }
      // }
      // if (column.property === 'boxCount') {
      //   return 'background-color:#1989fa80;color:#fff;font-weight:600;'
      // }
      if (this.rowIndex === rowIndex) {
        return {
          'background-color': '#8cc5ff !important',
          'color': '#fff !important',
        }
      }
    },
    rowClassName({row, rowIndex}) {
      row.index = rowIndex
    },

    handleSendBillClickTableRow(row, column, event) {
      const _that = this;
      _that.processListShow = false;
      _that.rowIndex = row.index;
      _that.processListData = row.craftBill.processList;
      for (let i = 0; i < _that.processListData.length; i++) {
        var datas = _that.processListData[i];
        _that.$set(datas, 'billCode', row.craftBill.billCode);
      }

      if(_that.processListData.length<=0){
        _that.processListShow = false;
      }else {
        _that.processListShow = true;
      }
    },
    feedbackBtnSure(){
      const _that = this;
      if(_that.form.feedbackNum){
        if (!(/(^[1-9]\d*$)/.test(_that.form.feedbackNum))) {
          _that.$message("反馈数量请输入大于0的整数");
          _that.form.feedbackNum = 0;
        }
      }
      var datas = {
        id: _that.rowData.id,
        feedbackNum:_that.form.feedbackNum,
        processState: _that.rowData.processState
      }
      var Infos = {
        "process": JSON.stringify(datas),
      }

      feedbackProcess(Infos).then(response => {
        // console.log("queryFeedbackGroupWithTasks", response)
        _that.$message("反馈成功");
        _that.processListData = [];
        _that.dialogFormVisible = false;
        _that.getMachine();

      }).catch(err => {
        _that.$message.error(err)
      })
    },
    feedbackBtn(row){
      const _that = this;
      _that.dialogFormVisible = true;
      _that.rowData= row;
      _that.form.feedbackNum = 0;
      // _that.processState = row.processState;
      // if(_that.processState==1){
      //   _that.processTitle="反馈";
      // }else if(_that.processState==2){
      //   _that.processTitle="反馈";
      // } else if(_that.processState==3){
      //   _that.processTitle="反馈";
      // }else if(_that.processState==4){
      //   _that.processTitle="确认交接？";
      // }else if(_that.processState==10){
      // }
      // // console.log(row.craftInfo.feedbackProcess);
      // var processArray = row.craftInfo.feedbackProcess.split("");
      // var processArray = [];
      // console.log(processArray);

    },
    //获取表格数据
    getTableInfo() {
      const _that = this;
      if(localStorage.getItem('idGroup')==undefined || localStorage.getItem('idGroup')==null || localStorage.getItem('idGroup')==""){
        var id = _that.machineInfList[0].id;
        _that.idGroup = _that.machineInfList[0].id;
        _that.getBillProcess(id);
      }else {
        var id = localStorage.getItem('idGroup');
        _that.idGroup = Number(localStorage.getItem('idGroup'));
        _that.getBillProcess(id);
      }
    },
    getMachine() {
      const _that = this;
      var datas = {}
      var Infos = {
        "params": JSON.stringify(datas),
      }

      getFeedbackGroupList(Infos).then(response => {
        // console.log("queryFeedbackGroupWithTasks", response)
        _that.machineInfList = response.data;
        _that.getTableInfo();
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    idGroupChange(){
      const _that = this;
      _that.rowIndex = "";
      _that.processListShow = false;
      localStorage.setItem("idGroup",_that.idGroup);
      _that.getBillProcess(_that.idGroup);
    },
    getBillProcess(idGroup){
      const _that = this;
      _that.listLoading = true;
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        idGroup: idGroup,
        params:{
          keyWord:_that.search.keyWord
        },
        page: JSON.stringify(page)

      }
      queryBillProcessFeedback(data).then(response => {
        const data = response.data;
        _that.listLoading = false;
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false;
        var btnVal = "";
        for (let i = 0; i < _that.tableData.length; i++) {
          var datas = _that.tableData[i]
          // console.log(datas.craftInfo.feedbackProcess.indexOf("1"));
          var processVal = datas.craftInfo.feedbackProcess;
          var processNum = datas.processState;

          if(processNum==1){
            var str = processVal.slice(0);
            var btnIndex = str.indexOf("1");
            if(btnIndex==0){
              btnVal = "验收";
            }else if(btnIndex==1){
              btnVal = "开始";
            }else if(btnIndex==2){
              btnVal = "结束";
            }else if(btnIndex==3){
              btnVal = "交接";
            }else {
              btnVal = "已完成";
            }
          }else if(processNum==2){
            var str =  processVal.slice(1);
            var btnIndex = str.indexOf("1");
            if(btnIndex==0){
              btnVal = "开始";
            }else if(btnIndex==1){
              btnVal = "结束";
            }else if(btnIndex==2){
              btnVal = "交接";
            }else {
              btnVal = "已完成";
            }
          }else if(processNum==3){
            var str = processVal.slice(2);
            var btnIndex = str.indexOf("1");
            if(btnIndex==0){
              btnVal = "结束";
            }else if(btnIndex==1){
              btnVal = "交接";
            }else {
              btnVal = "已完成";
            }
          }else if(processNum==4){
            var str = processVal.slice(3);
            var btnIndex = str.indexOf("1");
            if(btnIndex==0){
              btnVal = "交接";
            }else {
              btnVal = "已完成";
            }
          }
          // console.log("字符串"+i,str);
          _that.$set(datas, 'btnVal', btnVal);
        }
      }).catch(err => {
        _that.listLoading = false
      })
    },
    //搜索
    searchData() {
      this.listData.page = 1;
      this.processListData = [];
      this.getTableInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}

.filter-container {
  margin-bottom: 15px;
}
</style>
