<template>
  <div>
    <el-card>
      <!--<el-radio-group v-model="radio" @change="changeType">-->
      <!--<el-radio :label="1">自制件</el-radio>-->
      <!--<el-radio :label="2">采购部采购</el-radio>-->
      <!--<el-radio :label="3">制造部采购</el-radio>-->
      <!--</el-radio-group>-->
      <span style="display:inline-block;margin-left: 10px">零件图号：</span>
      <el-autocomplete
        v-model="searchPick"
        :fetch-suggestions="querySearch"
        clearable
        style="width: 200px;margin-left: 10px;"
        size="small"
        class="inline-input"
        placeholder="请输入零件图号"
        @select="handleSelect"
        @clear="clearSelect"
      />
      <!--<el-button type="text" @click="show1 = !show1" style="margin-left: 10px">高级查询</el-button>-->
      <!--<div v-show="show1" style="margin-top: 20px" class="transition-box">-->
      <!--<span style="display:inline-block;margin-left: 10px">项目名称：</span>-->
      <!--<el-autocomplete-->
      <!--v-model="searchCriteria"-->
      <!--:fetch-suggestions="querySearch"-->
      <!--clearable-->
      <!--style="width: 200px;margin-left: 10px;"-->
      <!--size="small"-->
      <!--class="inline-input"-->
      <!--placeholder="请输入零件或物料"-->
      <!--@clear="clearSelect"-->
      <!--@select="handleSelect"-->
      <!--/>-->
      <!--<span style="display:inline-block;margin-left: 10px">机床图号：</span>-->
      <!--<el-input-->
      <!--v-model="input_Mobile"-->
      <!--:trigger-on-focus="false"-->
      <!--clearable-->
      <!--size="small"-->
      <!--style="width: 200px;margin-right: 10px"-->
      <!--placeholder="请输入内容"/>-->
      <!--<span style="display:inline-block;margin-left: 10px">组号：</span>-->
      <!--<el-input-->
      <!--v-model="input_Mobile"-->
      <!--:trigger-on-focus="false"-->
      <!--clearable-->
      <!--size="small"-->
      <!--style="width: 200px;margin-right: 10px"-->
      <!--placeholder="请输入内容"/>-->
      <!--<span style="display:inline-block;margin-left: 10px">零件图号：</span>-->
      <!--<el-input-->
      <!--v-model="input_Mobile"-->
      <!--:trigger-on-focus="false"-->
      <!--clearable-->
      <!--size="small"-->
      <!--style="width: 200px;margin-right: 10px"-->
      <!--placeholder="请输入内容"/>-->
      <!--</div>-->
      <div>
        <el-divider content-position="right">零件档案</el-divider>
        <div class="text">
          <span style="display:inline-block;margin-left: 10px">零件图号：<el-tag size="small">{{ form.零件图号 }}</el-tag></span>
          <el-divider direction="vertical"/>
          <span style="display:inline-block;margin-left: 10px">零件名称：<el-tag size="small">{{ form.零件名称 }}</el-tag></span>
          <el-divider direction="vertical"/>
          <span style="display:inline-block;margin-left: 10px">投产数量：<el-tag size="small">{{ form.投产数量 }}</el-tag></span>
          <el-divider direction="vertical"/>
          <span style="display:inline-block;margin-left: 10px">所属机床：<el-tag size="small">{{ form.所属机床 }}</el-tag></span>
          <el-divider direction="vertical"/>
          <span style="display:inline-block;margin-left: 10px">所属组件：<el-tag size="small">{{ form.所属组件 }}</el-tag></span>
        </div>
        <el-divider content-position="right">生命周期</el-divider>
        <div class="text item">
          <el-row>
            <el-col :span="3">
              <el-timeline style="margin-top: 40px">
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :icon="activity.icon"
                  :type="activity.type"
                  :color="activity.color"
                  :size="activity.size"
                  :timestamp="activity.timestamp">
                  {{ activity.content }}
                </el-timeline-item>
              </el-timeline>
            </el-col>
            <el-col :span="1">
              <div style="width:1px;border:0.1px solid #DCDFE6;float:left;height:450px;"/>
            </el-col>
            <el-col :span="20" style="margin-top: 30px">
              <div class="main">
                <div v-show="show" style="line-height: 130px;text-align: center">
                  <div>
                    —请查询—
                  </div>
                </div>
                <div class="sudoku_row" >
                  <div v-for="(sudoku,index) in sudokus" :class="curSelect==sudoku.id?'opacity':''" :key="index" class="sudoku_item " @touchstart="touchstart(index)" @touchend="touchend">
                    <div class="text">
                      第{{ sudoku.id }}序
                    </div>
                    <div :style="{width: '100px',height: '100px',border: '1px solid grey','text-align': 'center', 'background-color': sudoku.color}" class="text">
                      <el-row style="margin-top: 10px">
                        <div style="height: 20px">
                          {{ sudoku.procedure }}
                        </div>
                      </el-row>
                      <el-row style="margin-top: 2px">
                        <div style="height: 20px">
                          {{ sudoku.planningTime }}
                        </div>
                      </el-row>
                      <el-row style="margin-top: 2px">
                        <div style="height: 20px">
                          {{ sudoku.actualTime }}
                        </div>
                      </el-row>
                      <el-row style="margin-top: 2px">
                        <div style="height: 20px">
                          {{ sudoku.name }}
                        </div>
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
              <el-row :gutter="20" style="margin-top: 50px">
                <el-col :span="11">
                  <div style="width: 100%;height: 200px;border: 1px solid #DCDFE6">
                    <el-row style="margin-top: 15px;margin-right: 15px">
                      <span style="float: right">—备料信息—</span>
                    </el-row>
                    <el-row style="margin-top: 30px;margin-left: 10px">
                      <span style="width:80px;margin-left: 10px">备料单：<el-tag size="small" type="success">{{ isMaterials }}</el-tag></span>
                      <span style="width:80px;margin-left: 20px">备料类型：<el-tag size="small" type="success">{{ materialsType }}</el-tag></span>
                      <span style="width:80px;margin-left: 20px">下料员：<el-tag size="small" type="success">{{ Cutter }}</el-tag></span>
                      <span style="width:80px;margin-left: 20px">确认日期：<el-tag size="small" type="success">{{ confirmationTime }}</el-tag></span>
                    </el-row>
                    <el-row style="margin-top: 30px;margin-left: 30px">
                      <el-steps :space="200" :active="active" finish-status="success">
                        <el-step title="创建备料"/>
                        <el-step title="备料确认"/>
                      </el-steps>
                    </el-row>
                  </div>
                </el-col>
                <el-col :span="11">
                  <div style="width: 100%;height: 200px;border: 1px solid #DCDFE6">
                    <el-row style="margin-top: 15px;margin-right: 15px">
                      <span style="float: right">—外协信息—</span>
                    </el-row>
                    <el-row style="margin-top: 30px;margin-left: 10px">
                      <span style="width:80px;margin-left: 10px">是否序间外协：<el-tag size="small" type="success">{{ isOut }}</el-tag></span>
                      <span style="width:80px;margin-left: 20px">外协工序：<el-tag size="small" type="success">{{ outName }}</el-tag></span>
                      <span style="width:80px;margin-left: 20px">检验日期：<el-tag size="small" type="success">{{ outTime }}</el-tag></span>
                    </el-row>
                    <el-row style="margin-top: 30px;margin-left: 30px;margin-right: 30px">
                      <el-steps :active="active1" finish-status="success">
                        <el-step title="序间外协"/>
                        <el-step title="价格预算"/>
                        <el-step title="任务执行"/>
                        <el-step title="到货质检"/>
                      </el-steps>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-divider content-position="right">跳转链接</el-divider>
          <el-row style="margin-left: 20px">
            <el-tooltip :open-delay="1000" effect="dark" content="转到零件状态查询模块" placement="top">
              <el-button size="medium" type="text" @click="toStatusQuery">零件状态查询</el-button>
            </el-tooltip>
            <el-divider direction="vertical"/>
            <el-tooltip :open-delay="1000" effect="dark" content="转到加工进度查询模块" placement="top">
              <el-button size="medium" type="text" @click="toProcessingStatus">加工进度查询</el-button>
            </el-tooltip>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { SelectPart, SelectProcessingProgress, SelectPreparation, SelectOut } from '@/api/ManufacturingCenter/TraceabilityOfParts'
export default {
  data() {
    return {
      isOut: '请查询',
      outName: '请查询',
      outTime: '请查询',
      active: '',
      active1: '',
      confirmationTime: '请查询',
      Cutter: '请查询',
      isMaterials: '请查询',
      searchPick: '',
      materialsType: '请查询',
      restaurantsPick: [],
      show: true,
      show1: false,
      // typeA: true,
      // typeB: false,
      // typeC: false,
      radio: 1,
      form: {
        零件图号: '请查询',
        投产数量: '请查询',
        所属机床: '请查询',
        所属组件: '请查询',
        零件名称: '请查询'
      },
      activities: [{
        id: 3,
        content: '生产计划下达',
        timestamp: '制造部：计划员',
        type: '',
        size: 'large'
      }, {
        id: 4,
        content: '工艺制定',
        timestamp: '工艺部：工艺员',
        type: '',
        size: 'large'
      }, {
        id: 5,
        content: '定额制定',
        timestamp: '工艺部：工艺员',
        type: '',
        size: 'large'
      }, {
        id: 6,
        content: '生产能力平衡',
        timestamp: '制造部：计划员',
        type: '',
        size: 'large'
      }, {
        id: 7,
        content: '加工',
        timestamp: '金工车间：操作工',
        type: '',
        size: 'large'
      }, {
        id: 8,
        content: '入库',
        timestamp: '金工车间：库管员',
        type: '',
        size: 'large'
      }, {
        id: 9,
        content: '出库',
        timestamp: '金工车间：库管员',
        type: '',
        size: 'large'
      }],
      sudokus: [],
      curSelect: null
    }
  },
  methods: {
    // changeType() {
    //   if(this.radio === 1) {
    //     this.typeA = true
    //     this.typeB = false
    //     this.typeC = false
    //   } else if(this.radio === 2) {
    //     this.typeA = false
    //     this.typeB = true
    //     this.typeC = false
    //   } else if(this.radio === 3) {
    //     this.typeA = false
    //     this.typeB = false
    //     this.typeC = true
    //   }
    // },
    touchstart: function(e) {
      var that = this
      var list = that.sudokus
      for (var i = 0, len = list.length; i < len; ++i) {
        if (list[i].id === e) {
          that.curSelect = i
        }
      }
    }, touchend: function() {
      var that = this
      that.curSelect = null
    },
    querySearch(queryString, cb) {
      this.restaurantsPick = []
      if (this.searchPick !== '' && this.searchPick !== null) {
        SelectPart(0, '', 0, '', 0, '', 1, this.searchPick, 0, '', 0, '', 0, '', '', '', '').then(response => {
          const res = response.data
          res.forEach(item => {
            this.restaurantsPick.push({
              value: item.零件图号,
              name: item.工艺计划流水号
            })
          })
          return this.restaurantsPick
        }).then(data => {
          var restaurants = data
          var results = queryString ? restaurants.filter(this.createFilterPick(queryString)) : restaurants
          return results
        }).then(data => {
          cb(data)
        })
      }
    },
    toStatusQuery() {
      this.$router.push('/ManufacturingCenter/StatusQuery')
    },
    toProcessingStatus() {
      this.$router.push('/ManufacturingCenter/ProcessingStatus')
    },
    createFilterPick(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
      }
    },
    clearSelect() {
      this.active = ''
      this.active1 = ''
      this.sudokus = []
      this.isOut = '请查询'
      this.outName = '请查询'
      this.outTime = '请查询'
      this.confirmationTime = '请查询'
      this.Cutter = '请查询'
      this.isMaterials = '请查询'
      this.materialsType = '请查询'
      this.form.零件图号 = '请查询'
      this.form.投产数量 = '请查询'
      this.form.所属机床 = '请查询'
      this.form.所属组件 = '请查询'
      this.form.零件名称 = '请查询'
      for (let i = 0; i < this.activities.length; i++) {
        this.activities[i].type = ''
      }
      this.show = true
    },
    handleSelect(item) {
      this.sudokus = []
      this.show = false
      this.active = ''
      this.active1 = ''
      this.confirmationTime = '请查询'
      this.Cutter = '请查询'
      this.isMaterials = '请查询'
      this.materialsType = '请查询'
      this.isOut = '请查询'
      this.outName = '请查询'
      this.outTime = '请查询'
      for (let i = 0; i < this.activities.length; i++) {
        this.activities[i].type = ''
      }
      SelectPart(0, '', 0, '', 0, '', 0, '', 0, '', 0, '', 0, '', '', '', item.name).then(response => {
        this.form.零件图号 = response.data[0].零件图号
        this.form.投产数量 = response.data[0].批次数量
        this.form.所属机床 = response.data[0].机床图号
        this.form.所属组件 = response.data[0].组号
        this.form.零件名称 = response.data[0].零件名称
      })
      SelectProcessingProgress(item.name).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.sudokus.push({
            id: response.data[i].工序顺序,
            procedure: response.data[i].工艺名称,
            planningTime: response.data[i].计划日期_短,
            actualTime: response.data[i].完成日期_短 === null || response.data[i].完成日期_短 === '' ? '未完成' : response.data[i].完成日期_短,
            name: response.data[i].完成日期_短 === null || response.data[i].完成日期_短 === '' ? '未完成' : response.data[i].员工姓名,
            color: response.data[i].进度颜色
          })
        }
      })
      SelectPreparation(item.name).then(response => {
        if (response.data.length !== 0) {
          if (response.data[0].类型.toString() === '0') {
            this.isMaterials = '未创建'
            this.materialsType = '未创建'
            this.Cutter = '未创建'
            this.confirmationTime = '未创建'
            this.active = '0'
          } else if (response.data[0].类型.toString() === '1') {
            this.isMaterials = '已创建'
            this.materialsType = '自家备料'
            this.Cutter = '未确认'
            this.confirmationTime = '未确认'
            this.active = '1'
          } else if (response.data[0].类型.toString() === '2') {
            this.isMaterials = '已创建'
            this.materialsType = '外购备料'
            this.Cutter = '未确认'
            this.confirmationTime = '未确认'
            this.active = '1'
          } else if (response.data[0].类型.toString() === '3') {
            this.isMaterials = '已创建'
            this.materialsType = '自家备料'
            this.active = '2'
            response.data[0].下料员 !== null && response.data[0].下料员 !== '' ? this.Cutter = response.data[0].下料员 : this.Cutter = '未确认'
            response.data[0].确认时间 !== null && response.data[0].确认时间 !== '' ? this.confirmationTime = response.data[0].确认时间.substring(0, 10) : this.confirmationTime = '未确认'
          } else if (response.data[0].类型.toString() === '4') {
            this.isMaterials = '已创建'
            this.materialsType = '外购备料'
            this.active = '2'
            response.data[0].下料员 !== null && response.data[0].下料员 !== '' ? this.Cutter = response.data[0].下料员 : this.Cutter = '未确认'
            response.data[0].确认时间 !== null && response.data[0].确认时间 !== '' ? this.confirmationTime = response.data[0].确认时间.substring(0, 10) : this.confirmationTime = '未确认'
          }
        }
      })
      SelectPart(0, '', 0, '', 0, '', 1, this.searchPick, 0, '', 0, '', 0, '', '', '', '').then(response => {
        console.log(response, 8)
        for (let i = 0; i < this.activities.length; i++) {
          if (response.data[0].考核状态.toString() === this.activities[i].id.toString()) {
            for (let j = 0; j <= i; j++) {
              this.activities[j].type = 'success'
            }
            this.activities[i + 1].type = 'warning'
          }
        }
      })
      SelectOut(item.name).then(response => {
        console.log(response, 87633)
        if (response.data[0].状态编号.toString() === '1') {
          this.isOut = '是'
          this.active1 = '1'
          this.outName = ''
          this.outTime = '未到货检验'
          for (let i = 0; i < response.data.length; i++) {
            if (i === 0) {
              this.outName = response.data[i].外协工序
            } else {
              this.outName = this.outName + '、' + response.data[i].外协工序
            }
          }
        } else if (response.data[0].状态编号.toString() === '2') {
          this.isOut = '是'
          this.active1 = '2'
          this.outName = ''
          this.outTime = '未到货检验'
          for (let i = 0; i < response.data.length; i++) {
            if (i === 0) {
              this.outName = response.data[i].外协工序
            } else {
              this.outName = this.outName + '、' + response.data[i].外协工序
            }
          }
        } else if (response.data[0].状态编号.toString() === '3') {
          this.isOut = '是'
          this.active1 = '3'
          this.outName = ''
          this.outTime = '未到货检验'
          for (let i = 0; i < response.data.length; i++) {
            if (i === 0) {
              this.outName = response.data[i].外协工序
            } else {
              this.outName = this.outName + '、' + response.data[i].外协工序
            }
          }
        } else if (response.data[0].状态编号.toString() === '4') {
          this.isOut = '是'
          this.active1 = '4'
          this.outName = ''
          this.outTime = response.data[0].检验日期
          for (let i = 0; i < response.data.length; i++) {
            if (i === 0) {
              this.outName = response.data[i].外协工序
            } else {
              this.outName = this.outName + '、' + response.data[i].外协工序
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-textarea__inner, .el-radio__inner, .el-input__inner{
    border: 1px solid #C0C4CC !important
  }
  .text{
    font-size: 14px;
  }
  .sudoku_row{
    height: 120px;
    padding: 5px;
    /*overflow-x: scroll;*/
    display: flex;
    align-items: center;
    /*flex-wrap: wrap;*/
  }
  .sudoku_item{
    margin-right: 10px;
    display: flex;
    height: 110px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
  }
  .opacity{
    opacity: 0.4;
    background: #e5e5e5;
  }
  .sudoku_item img{
    margin-bottom: 3px;
    display: block;
  }
  .main{
     border: 1px solid  #DCDFE6;
     width:91.5%;
     overflow-y: hidden;
     overflow-x: auto;
     color: #000;
     font-size: 16px;
     height: 130px;
   }
  .main p{height:300px;}
  /*-------滚动条整体样式----*/
  .main::-webkit-scrollbar {
    width:8px;
    height:8px;
  }
  /*滚动条里面小方块样式*/
  .main::-webkit-scrollbar-thumb {
    border-radius:100px;
    -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
    background:#DCDFE6;
  }
  /*滚动条里面轨道样式*/
  .main::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
    border-radius:0;
    background:white;
  }
</style>
