<template>
  <div>
    <div class="divborder newSearchDiv">
      <div class="filter">
        <label>{{$t('100089')}}：</label>
        <Select
          v-model="productname"
          label-in-value
          clearable
          filterable
          remote
          :remote-method="remoteMethod1"
          :loading="loading1"
          class="searchSelect"
        >
          <Option
            v-for="(item,index) in products"
            :value="item.code"
            :key="index"
          >{{ item.name }}({{item.code}})</Option>
        </Select>
      </div>
      <div class="filter">
            <label>{{$t('5500271')}}：</label>
            <Select v-model="printtype" label-in-value class="searchSelect">
              <!-- <Option :value="1">{{$t('5500272)}}</Option> -->
              <Option :value="2">{{$t('5500273')}}</Option>
            </Select>
          </div>
      <div class="filter">
        <label>{{$t('5500274')}}：</label>
        <Select v-model="typeid" label-in-value clearable class="searchSelect" @on-change="getLabelType">
          <Option
            v-for="(item,index) in labeltypes"
            :value="item.dkey"
            :key="index"
          >{{item.dval}}</Option>
        </Select>
      </div>
        <div class="searchBtn">
            <Button type="primary" class="twoWord" icon="ios-search" @click="tosearch">{{$t('1001')}}</Button>
        </div>
    </div>

    <div class="divborder newTableDiv newSearchDiv" style="overflow:auto;">
      <Row style="padding:10px;min-width:1400px;">
        <Col class="item_out" style="width:37.5%">
            <Card :bordered="false">
                <p slot="title">{{$t('5500275')}}</p>
                <div>
                  <div>
                    <Table
                      highlight-row
                      :data="tableData1"
                      :columns="tableColumns1"
                    ></Table>
                    </div>
                  <div class="image">
                    <img :src="imgsrc" style="width:100%;"/>
                  </div>
                </div>
            </Card>
        </Col>
        <Col class="item_out" style="margin:0 0.5%;width:12.5%">
            <Card :bordered="false">
                <p slot="title">{{$t('920140')}}</p>
                <div>
                  <Table
                    highlight-row
                    :data="tableData2"
                    :columns="tableColumns2"
                     @on-current-change="handleRowChange2"
                  ></Table>
                </div>
            </Card>
        </Col>
        <Col class="item_out" style="width:49%">
            <Card :bordered="false">
                <p slot="title">{{$t('5500276')}}</p>
                <div>
                  <RadioGroup v-model="source">
                    <Radio :label="labelname"></Radio>
                    <!-- <Radio label="来源于系统生成"></Radio> -->
                  </RadioGroup>
                </div>
                <div style="margin-top:10px;">
                  <div class="filter">
                    <span>{{$t('5500278')}}：</span>
                    <Select v-model="tablename" label-in-value class="searchSelect">
                      <Option
                        v-for="(item,index) in tablenames"
                        :value="item.id"
                        :key="index"
                        @click.native="getTableParams(item)"
                      >{{item.name}}</Option>
                    </Select>
                  </div>
                </div>
                <div>
                  <div>
                    <Table
                      highlight-row
                      :row-class-name="rowClassName"
                      :data="tableData3"
                      :columns="tableColumns3"
                      :max-height="300"
                       @on-current-change="handleRowChange3"
                    ></Table>
                  </div>
                </div>
                <!-- <div class="searchBtn" style="margin:20px 0px;text-align: right;">
                  <Button type="primary" @click="addPost" style="padding:5px 20px;font-size:20px;" class="twoWord" >{{$t('1011')}}</Button>
                </div> -->
            </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import axios from "@/libs/api.request";
export default {
  data(){
    return {
      labelname:this.$t('5500277'),
      productname:'',
      loading1: false,
      products:[],
      printtype:'',
      typeid:'',
      labeltypes:[],
      imgsrc: '',
      tableColumns1:[
        {
          title:this.$t('5500274'),
          key:'type'
        },
        {
          title:this.$t('930136'),
          key:'filename',
          render:(h,params)=>{
            return h('span',
            {
              style:{
                color:'#2d8cf0',
                cursor:'pointer'
              },
              on:{
                click:()=>{
                  var url = params.row.file_url;
                  var filetype = ''
                  if(url!=""&&url!=undefined&&url!=null){
                    filetype = url.split('.')[1];
                    if(filetype==='txt'){
                      this.getTxtfile(params.row)
                    }else if(filetype==='xls'||filetype==='xlsx'){
                      window.location.href = this.axios.publicPath + '' + url
                    }
                  }
                }
              }
            },params.row.filename)
          }
        },
      ],
      tableData1:[],
      tableColumns2:[
        {
          title:this.$t('99100039'),
          key:'paramsname'
        }
      ],
      tableData2:[],
      source:this.$t('5500277'),
      tablename:'',
      tablenames:[
        {
          id:1,
          name:'siger_tr_sn_list'
        },
        {
          id:2,
          name:'siger_tr_pack_box_list'
        }
      ],
      tableColumns3:[
        {
          title:this.$t('1008'),
          key:'index'
        },
        {
          title:this.$t('5500279'),
          key:'paramsname'
        }
      ],
      tableData3:[],
      tableobj1:'',
      tableobj2:'',
      typename:'',
      fileid:0,
    }
  },
  created(){
    this.iniproducts("");
    this.getlabeltypes()
  },
  methods:{
    getTxtfile(file){
      axios
        .request({
          url: "/config/Download/DownloadFile?file_url=" + file.file_url,
          method: "get",
        })
        .then((res) => {
          if (res.data.ret === 1) {
            var info = res.data.data;
            var content = info.content;
            // 创建隐藏的可下载链接
            var eleLink = document.createElement("a");
            eleLink.download = file.filename;
            eleLink.style.display = "none";
            // 字符内容转变成blob地址
            var blob = new Blob([content]);
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);

          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    tosearch(){
      if(this.productname===""||this.productname===null||this.productname===undefined){
        this.$Message.error(this.$t('9000140'))
        return false
      }
      if(this.printtype===""||this.printtype===null||this.printtype===undefined){
        this.$Message.error(this.$t('5500280'))
        return false
      }
      if(this.typeid===""||this.typeid===null||this.typeid===undefined){
        this.$Message.error(this.$t('5500281'))
        return false
      }
      var params = {
        labletype:this.typeid,
        printtype:this.printtype,
        productcode:this.productname
      }
      axios
        .request({
          url: "/acc/PrintRelation/GetTxtParameters",
          params,
          method: "get",
        })
        .then((res) => {
          this.tableData2 = []
          this.tableData1 = []
          this.imgsrc = ''
          this.fileid = 0
          if (res.data.ret === 1 && res.data.data.length > 0) {
            let info = res.data.data[0]
            this.fileid = info.fileid
            this.imgsrc = axios.publicPath + info.image
            this.tableData2 = info.txtparameters
            this.tableData1 = [
              {
                type:this.typename,
                filename:info.filename!=undefined?info.filename:'',
                file_url:info.file_url!=undefined?info.file_url:''
              }
            ]
            if(info.txtparameters.length >0){
              let arr = []
              info.txtparameters.forEach((item,index) => {
                arr.push({
                  paramsname:item
                })
              });
              this.tableData2 = arr
            }
          }
          else
          {
            // this.$Message.error(this.$t(res.data.msg))
            this.$Message.error(this.$t('5500282'))
          }
        });
    },
    getLabelType(info){
      this.typename = ''
      if(info!=undefined){
        this.typename = info.label
      }
    },
    getlabeltypes(){
      axios
        .request({
          url: "/config/Dict/GetDictByCat?cat=labeltype",
          method: "get",
        })
        .then((res) => {
          this.labeltypes = []
          if (res.data.ret === 1 && res.data.data.length > 0) {
            this.labeltypes = res.data.data;
          }
        });
    },
    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("");
      }
    },
    getTableInfo(){
      var params = {
        fileid:this.fileid,
        parameter:this.tableobj1.paramsname
      }
      axios
        .request({
          url: "/acc/PrintRelation/GetTableFieldByParam",
          params,
          method: "get",
        })
        .then((res) => {
          this.tableData3 = []
          let params = res.data.data
          if (res.data.ret === 1 && params!=null&&params!=undefined&& params.columns.length > 0) {
            let arr = []
            params.columns.forEach((item,index)=>{
              arr.push({
                index:parseInt(index) + 1,
                paramsname:item.name,
                checked:item.set
              })
            })
            this.tableData3 = arr
            this.tablename = params.tableName
          }
          else
          {
            this.tablename = ''
            // this.$Message.error(this.$t(res.data.msg))
          }
        });
    },
    getTableParams(info){
      this.getTablerefresh()
    },
    getTablerefresh(){
      var params = {
        fileid:this.fileid,
        tableid:this.tablename,
        parameter:this.tableobj1.paramsname
      }
      axios
        .request({
          url: "/acc/PrintRelation/GetTableField",
          params,
          method: "get",
        })
        .then((res) => {
          this.tableData3 = []
          let params = res.data.data
          if (res.data.ret === 1 && params!=null&&params!=undefined) {
            let arr = []
            if(params.columns.length > 0){
              params.columns.forEach((item,index)=>{
                arr.push({
                  index:parseInt(index) + 1,
                  paramsname:item.name,
                  checked:item.set
                })
              })
            }
            this.tableData3 = arr
          }
          else
          {
            this.$Message.error(this.$t(res.data.msg))
          }
        });
    },
    handleRowChange2(currentRow, oldCurrentRow) {
        this.tableobj1 = currentRow;
        this.getTableInfo();
    },
    handleRowChange3(currentRow, oldCurrentRow) {
        this.tableobj2 = currentRow;
        this.addPost()
    },
    rowClassName (row, index) {
        if (row.checked === 1) {
            return 'ivu-table-row-highlight ivu-table-row-hover';//默认选中
        } else{
            return '';
        }
        return '';
    },
    addPost(){
      if(this.tableobj1===''||this.tableobj1===undefined||this.tableobj1===null){
        this.$Message.error(this.$t('5500283'))
        return false;
      }
      if(this.tableobj2===''||this.tableobj2===undefined||this.tableobj2===null){
        this.$Message.error(this.$t('5500284'))
        return false;
      }
      var data = {
        fileid:this.fileid,
        txt_parameters:this.tableobj1.paramsname,
        table_name:this.tablename,
        table_parameters:this.tableobj2.paramsname
      }
      axios
        .request({
          url: "/acc/PrintRelation/Add",
          data,
          method: "post",
        })
        .then((res) => {
          if (res.data.ret === 1) {
            this.$Message.success(this.$t('1064'))
            this.getTablerefresh()
          }
          else
          {
            this.$Message.error(this.$t(res.data.msg))
          }
        });
    }
  }
}
</script>
<style lang="less" scoped>
  .item_out{
    float:left;
    min-height:500px;
    .image{
      margin-top:10px;
      width:100%;
      height:450px;
      overflow: auto;
    }
  }
  .item_out>div{
    border:1px solid #eee;
  }
</style>