<template>
  <div>
    <div class="divborder newSearchDiv">
      <div>
        <Row style="">
            <Col class="item_out" span="12">
                <Card :bordered="false">
                    <p slot="title">1、{{$t('300018')}}</p>
                    <div>
                      <div class="filter">
                        <label>{{$t('950237')}}：</label>
                        <Cascader class="searchSelect middleWidth" trigger="click" :clearable="false" :data="datalevel" :value="leveldata" @on-change="handlelevelchange" change-on-select></Cascader>
                      </div>
                      <div class="filter">
                        <label>{{$t('100089')}}：</label>
                        <Select class="searchSelect middleWidth" :placeholder="$t('800229')" @on-change="getRoute" v-model="productname" label-in-value filterable remote :remote-method="remoteMethod1" :loading="loading1">
                          <Option v-for="(item,index) in products" :value="item.code" :key="index" >{{ item.name }}({{item.code}})</Option>
                        </Select>
                      </div>
                    </div>
                    <div>
                      <div class="filter">
                        <label>{{$t('950238')}}：</label>
                        <Select class="searchSelect middleWidth" v-model="username" label-in-value filterable>
                          <Option v-for="(item,index) in userlist" :value="item.id" :key="index" >{{ item.name }}({{item.work_code}})</Option>
                        </Select>
                      </div>
                      <div class="filter">
                        <label>{{$t('900150')}}：</label>
                        <Select class="searchSelect middleWidth" v-model="technology" label-in-value clearable filterable>
                          <Option v-for="(item,index) in technologylist" :value="item.id" :key="index" >{{ item.route }}</Option>
                        </Select>
                      </div>
                    </div>
                </Card>
            </Col>
            <Col class="item_out" span="12">
                <Card :bordered="false">
                    <p slot="title">2、{{$t('5500300')}}</p>
                    <div>
                      <div class="filter">
                        <label>{{$t('5500301')}}：</label>
                        <input ref="mainqrcode" class="searchInput middleWidth oldinput" :placeholder="$t('5500302')" @keyup.enter="mainEnter()" type="text" v-model="main_qrcode"/>
                      </div>
                    </div>
                    <div>
                      <div class="filter">
                        <label>{{$t('950257')}}：</label>
                        <Input class="searchInput" type="text" v-model="orderno" disabled/>
                      </div>
                      <div class="filter">
                        <label>{{$t('5500136')}}：</label>
                        <Input class="searchInput" type="text" v-model="ordernum" disabled/>
                      </div>
                      
                    </div>
                </Card>
            </Col>
        </Row>

        <Row>
            <Col class="item_out" span="12">
                <Card :bordered="false">
                    <p slot="title">3、{{$t('5500303')}}</p>
                    <div style="min-height:500px;">
                      <Tabs :value="tabValue" v-show="tabshow">
                        <TabPane v-for="(item,index) in tabLists" :key="index" :label="item.filename" :name="index+''">
                          <div v-if="item.filetype==='pdf'">
                            <embed :src="item.fileurl" type="application/pdf" width="100%" height="500px"/>
                          </div>
                          <div v-else-if="item.filetype==='jpg'||item.filetype==='png'||item.filetype==='gif'" style="height:500px;overflow:auto;">
                            <img :src="item.fileurl"  width="100%"/>
                          </div>
                          <div v-else-if="item.filetype==='txt'">
                            <span>{{fileContent}}</span>
                          </div>
                          <div v-else>
                            <span></span>
                          </div>
                        </TabPane>
                      </Tabs>
                    </div>
                </Card>
            </Col>
            <Col class="item_out" span="12">
                <Card :bordered="false">
                    <p slot="title">4、{{$t('5500304')}}</p>
                    <div class="filter">
                      <label>{{$t('5500305')}}：</label>
                      <input ref="partqrcode" class="searchInput middleWidth oldinput" :placeholder="$t('5500306')" @keyup.enter="partsEnter()" type="text" v-model="part_qrcode" disabled/>
                    </div>
                    <div>
                      <Table
                        :data="tableData1"
                        :columns="tableColumns1"
                        :max-height="300"
                      ></Table>
                    </div>
                    <div style="margin:20px 0px;text-align: right;">
                      <Button type="primary" style="height:40px;font-size:15px;" @click.native="addPost()">{{$t('1011')}}</Button>
                    </div>
                </Card>
            </Col>
        </Row>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "@/libs/api.request";
export default {
  data(){
    return {
      datalevel:[],
      leveldata:[],
      productname:'',
      products:[],
      loading1:false,
      username:'',
      userlist:[],
      technology:'',
      technologylist:[],
      main_qrcode:'',
      orderno:'',
      ordernum:'',
      tabValue:0,
      tableData1:[],
      tableColumns1:[
        {
          title:'ID',
          key:'index'
        },
        {
          title:this.$t('5500307'),
          key:'sn'
        },
        {
          title:this.$t('300084'),
          key:'number'
        },
        {
          title:this.$t('1004'),
          key:'',
          render:(h,params)=>{
            return h('Button',
            {
              style:{
                padding:'4px 10px 4px'
              },
              props:{
                type:'primary'
              },
              nativeOn:{
                click:()=>{
                  this.tableData1.splice(params.index, 1)　
                }
              }
            },this.$t('1004'))
          }
        }
      ],
      tabLists:[], //工艺图纸
      part_qrcode:'',//配件
      fileContent:'',
      tabshow:false
    }
  },
  created(){
    this.initlevel()
    this.iniproducts("")
    this.getUsers()
    // this.getProcessdrawing()
  },
  methods:{
    addPost(){
      let sectionid = this.leveldata.length>0?this.leveldata[this.leveldata.length - 1]:0;
      if(sectionid ===0||sectionid===undefined){
        this.$Message.error(this.$t('950241'))
        return false;
      }
      if(this.username===''||this.username===null||this.username===undefined){
        this.$Message.error(this.$t('950242'))
        return false;
      }
      if(this.main_qrcode===''||this.main_qrcode===null||this.main_qrcode===undefined){
        this.$Message.error(this.$t('5500252'))
        return false;
      }
      if(this.tableData1.length ===0){
        this.$Message.error(this.$t('5500253'))
        return false;
      }
      var data = {
        wo:this.orderno,
        sn:this.main_qrcode,
        AccessoriesSn:this.tableData1,
        SectionId:sectionid,
        userId:this.username
      }
      axios.request({
          url: '/acc/Assemb/Add',
          data,
          method: 'post'
      }).then(res => {
          if(res.data.ret ===1){
            this.$Message.success(this.$t('5500254'))
            this.orderno = ''
            this.ordernum = ''
            this.main_qrcode = ''
            this.part_qrcode = ''
            this.tableData1 = []
            this.$nextTick(()=>{
              this.$refs.partqrcode.disabled = false;
              this.$refs.mainqrcode.focus();
            })
          }
          else
          {
            this.$Message.error(this.$t(res.data.msg+''))
          }
      })
    },
    initlevel () {
        axios.request({
            url: '/config/ProjectLevelSection/GetSectionTree',
            method: 'get'
        }).then(res => {
            const arr = []
            if(res.data.ret ===1 && res.data.data!=null&&res.data.data!=undefined&&res.data.data.length){
              this.datalevel = res.data.data
              this.leveldata = arr
            }
        })
    },
    handlelevelchange (value) {
        this.leveldata = value
        this.getRoute()
    },
    iniproducts(name) {
      var params = {
        name: name,
        count: 50,
      };
      axios
        .request({
          url: "/config/ProjectProduct/GetProductsByCode",
          params,
          method: "get",
        })
        .then((res) => {
          if (res.data.ret === 1 && res.data.data.length > 0) {
            this.products = res.data.data;
          }
        });
    },
    remoteMethod1(name) {
      if (name !== "") {
        this.loading1 = true;
        setTimeout(() => {
          this.loading1 = false;
          this.iniproducts(name);
        }, 200);
      } else {
        this.iniproducts("");
      }
    },
    getUsers(){
      //获取人员
      var params = {
          page: 1,
          pagesize: 9999999
      };
      axios
          .request({
              url: '/config/user/GetUsers',
              params,
              method: 'get'
          })
          .then(res => {
            this.userlist = []
            if(res.data.ret ===1 && res.data.data!=null&&res.data.data!=undefined){
              this.userlist = res.data.data;
            }
          });
    },
    getRoute(){
      //获取工艺信息
      var params = {
        section:this.leveldata.length>0?this.leveldata[this.leveldata.length - 1]:0,
        productCode:this.productname
      }
      this.getProcessdrawing()
      axios
          .request({
              url: '/cnc/BeatAllocation/GetBeatRoute',
              params,
              method: 'get'
          })
          .then(res => {
            this.technologylist = []
            if(res.data.ret ===1 && res.data.data!=null&&res.data.data!=undefined){
              this.technologylist = res.data.data;
            }
          });
    },
    getProcessdrawing(){
      //获取工艺图纸
      var params = {
        station:this.leveldata.length>0?this.leveldata[this.leveldata.length - 1]:0,
        productCode:this.productname
      }
      this.tabshow = false
      axios
        .request({
            url: '/esop/EsopDocumentSearch/GetFileUrlInfo',
            params,
            method: 'get'
        })
        .then(res => {
          this.tabLists = []
          if(res.data.ret ===1 && res.data.data!=null&&res.data.data!=undefined){
            this.tabshow = true
            let arr = []
            res.data.data.forEach((item,index)=>{
              let filetype = ''
              if(item.fileurl!=''&&item.fileurl!=null&&item.fileurl!=undefined){
                filetype = item.fileurl.split('.')[1];
              }
              arr.push({
                filetype:filetype,
                typeid:item.typeid,
                typename:item.typename,
                filename:item.filename,
                fileurl:axios.publicPath + item.fileurl,
                fileContent:item.txtfile
              })
            })
            this.tabLists = arr;
          }
        });
    },
    mainEnter(){
      var params = {
        sn:this.main_qrcode,
      }
      axios
        .request({
            url: '/acc/SnList/GetWoInfo',
            params,
            method: 'get'
        })
        .then(res => {
          if(res.data.ret ===1){
            this.orderno = res.data.data.wo
            this.ordernum = res.data.data.quantity
            this.part_qrcode = ''
            this.tableData1 = []
            this.$nextTick(()=>{
              this.$refs.partqrcode.disabled = false;
              this.$refs.partqrcode.focus();
            })
          }
          else
          {
            this.orderno = ''
            this.ordernum = ''
            this.part_qrcode = ''
            this.tableData1 = []
            this.$nextTick(()=>{
              this.$refs.mainqrcode.focus();
              this.$refs.mainqrcode.select()
              this.$refs.partqrcode.disabled = true;
            })
            this.$Message.error(this.$t(res.data.msg+''))
          }
        });
    },
    partsEnter(){
      if(this.part_qrcode!=""&&this.part_qrcode!=undefined&&this.part_qrcode!=null){
        if(this.tableData1.length > 0){
          let indexnum = this.tableData1.length;
          let code = 0;
          this.tableData1.forEach((item,index)=>{
            if(this.part_qrcode === item.sn){
              code = 1;
              item.number = parseInt(item.number) +1
            }
          })
          if(code === 0){
            this.tableData1.push({
              index:parseInt(indexnum) +1,
              sn:this.part_qrcode,
              number:1
            })
          }
        }
        else
        {
          this.tableData1.push({
            index:1,
            sn:this.part_qrcode,
            number:1
          })
        }
        this.part_qrcode = ''
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .item_out{
    padding:0px 5px 10px;
  }
  
  .item_out>div{
    border:1px solid #eee;
    padding-right:5px;
  }
  .oldinput{
    display: inline-block;
    // width: 100%;
    // height: 32px;
    // line-height: 1.5;
    padding: 4px 7px;
    // font-size: 12px;
    border: 1px solid #dcdee2;
    border-radius: 3px;
    color: #515a6e;
    background-color: #fff;
    background-image: none;
    position: relative;
    cursor: text;
    -webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
    transition: border 0.2s ease-in-out, background 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
    transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  }
  .oldinput:hover {
    border-color: #57a3f3;
  }
</style>