<template>
    <section class="inquire pagex">
        <div class="inquire-con">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="型号">
                    <el-autocomplete @keyup.enter.native="onSubmit" v-model="formInline.goods_name" :trigger-on-focus="false" :fetch-suggestions="querySearchAsync" placeholder="请输入型号" @select="handleSelectGoodsName"></el-autocomplete>
                </el-form-item>
                <el-form-item label="品牌">
                    <el-autocomplete @keyup.enter.native="onSubmit" v-model="formInline.brand_name" :trigger-on-focus="false" :fetch-suggestions="querySearchAsync2" placeholder="请输入品牌" @select="handleSelectBrandName"></el-autocomplete>
                </el-form-item>
                <el-form-item label="询价日期">
                    <el-date-picker v-model="formInline.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <div @click="onSubmit" class="search-btn">搜索</div>
                </el-form-item>
            </el-form>
            <div class="btn-nav clr">
                <div class="fl dcg" @click="detail">报价</div>
                <div class="fl dcg" @click="exportChange">导出</div>
                <div class="fl dcg delbtn" @click="del">删除</div>
            </div>
            <div class="data-box">
                <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column prop="inquiry_sn"  label="询价单号" min-width="10%"></el-table-column>
                    <el-table-column prop="goods_name" label="型号" min-width="10%">
                        <template slot-scope="scope">
                            <div class="p-copy">
                                <p style="padding-right:25px;">{{scope.row.goods_name}}</p>
                                <a class="copy" v-clipboard:copy="scope.row.goods_name" v-clipboard:success="onCopy">复制</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="brand_name" label="品牌" min-width="10%"></el-table-column>
                    <el-table-column prop="inquiry_number" label="数量" min-width="10%"></el-table-column>
                    <el-table-column prop="batch" label="批次" min-width="10%"></el-table-column>
                    <el-table-column prop="delivery_time" label="交货日期" min-width="10%"></el-table-column>
                    <el-table-column prop="i_status" label="状态" min-width="10%">
                        <template slot-scope="scope">
                            <span v-if="scope.row.i_status==2" class="f-green">已报价</span>
                            <span v-else-if="scope.row.i_status==1" class="f-yellow1">待报价</span>
                            <span v-else-if="scope.row.i_status==9">已删除</span>
                            <span v-else-if="scope.row.i_status==-1" class="f-red1">已关闭</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="quote_num" label="报价数" min-width="10%"></el-table-column>
                    <el-table-column prop="create_time" label="报价时间" min-width="10%" :formatter='dateFormat'></el-table-column>
                </el-table>
                <el-pagination layout="prev, pager, next,jumper" :page-size="limit" :total="total" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
            </div>
        </div>
        <Menu/>
    </section>
</template>
<script>
  import Vue from 'vue';
  import Menu from "@/components/menu.vue";
  import {dateTimeFormate} from "../../filters/formate.js";
  import VueClipboard from 'vue-clipboard2'
  import Tool from '../../tool'
  import {
    Form,
    FormItem,
    Select,
    Option,
    Input,
    DatePicker,
    Button,
    Dropdown,
    DropdownMenu,
    DropdownItem,
    Table,
    TableColumn,
    MessageBox,
    Message,
    Dialog,
    Pagination,
    Autocomplete
  } from 'element-ui'
    import {
    NODE_ENVS
  } from "../../ajax";
Vue.prototype.$message=Message
  Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Autocomplete);
  Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination);
  Vue.use(VueClipboard);

  export default {
    name: "inquire",
    data() {
      return {
        total: 0,
        limit: 10,
        page: 1,
        tableData: [],
        multipleSelection: [],
        formInline: {
          goods_name: '',
           brand_id: '',
          brand_name: '',
          date: ''
        }
      };
    },
    watch: {
      'formInline.date'(val){
        if(!val){
          this.formInline.date=[]
        }
      },
      'formInline.brand_name'(val){
        if(!val){
          this.formInline.brand_id=""
          return
        }
        var arr_=[]
        this.brandList=this.brandList||[]
        for(var i=0;i<this.brandList.length;i++){
          arr_.push(this.brandList[i].value)
        }
        if(arr_.indexOf(val)==-1){
          this.formInline.brand_id=""
        }
      }
    },
    created() {
      this.getData();
    },
    computed: {},
    methods: {
      getData() {
        this.$http('get', "/api/inquiry/getlist", {
          page: this.page,
          limit: this.limit,
          goods_name: this.formInline.goods_name,
          brand_id: this.formInline.brand_id,
          brand_name: this.formInline.brand_name,
          start_time: this.formInline.date ? this.formInline.date[0] : '',
          end_time: this.formInline.date ? this.formInline.date[1] : ''
        }).then(res => {
          if (res.err_code === 0) {
            this.tableData = res.data.list || [];
            this.total = res.data.total;
          } else {
            this.$message(res.err_msg);
          }
        })
      },
      onSubmit() {
        this.page = 1;
        this.getData();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getData();
      },
      dateFormat(row, column) {
        let date = row.create_time;
        return dateTimeFormate(date);
      },
      detail() {
        var arr = [];
        if (this.multipleSelection.length == 0) {
          this.$message("请至少选择一条询价信息");
          return;
        }

        if (this.multipleSelection.length > 1) {
          this.$message("请选择一条询价信息");
          return;
        }

        if (this.multipleSelection[0].i_status == 1 || this.multipleSelection[0].i_status == 2) {
          for (var i = 0; i < this.multipleSelection.length; i++) {
            arr.push(this.multipleSelection[i]['id'])
          }

          this.$router.push({
            path: '/inquire/detail?id=' + arr.join(",")
          })

        } else {
          this.$message("该订单不可报价");
          return;
        }

      },
      exportChange() {
        var arr = [];
        if (this.multipleSelection.length == 0) {
          this.$message("请至少选择一条数据");
          return;
        }

        for (var i = 0; i < this.multipleSelection.length; i++) {
          arr.push(this.multipleSelection[i]['id'])
        }

        window.location.href = NODE_ENVS+'/api/inquiry/export?ids=' + arr.join(",")+'&token='+Tool.getCookie('token') ;


      },
      del() {
        var arr = [];
        if (this.multipleSelection.length == 0) {
          this.$message("请至少选择一条数据");
          return;
        }

        for (var i = 0; i < this.multipleSelection.length; i++) {
          arr.push(this.multipleSelection[i]['supplier_auto_inquiry_id'])
        }
        MessageBox.confirm('确认到删除当前勾选数据吗？', {
          type: 'error'
        }).then(() => {
          this.$http('post', "/api/inquiry/delete", {
            ids: arr.join(",")
          }).then(res => {
            if (res.err_code === 0) {
              this.$message("删除成功");
              this.getData();
            } else {
              this.$message(res.err_msg);
            }
          })
        }).catch(()=>{

          })
      },
      handleSelectGoodsName(item) {
        this.formInline.goods_name = item.value
      },
      handleSelectBrandName(item) {
        this.formInline.brand_name = item.value;
        this.formInline.brand_id = item.brand_id;
      },
      querySearchAsync(queryString, cb) {
        this.$http('get', "/api/search/getspu", {
          spu_name: this.formInline.goods_name
        }).then(res => {
          if (res.err_code == 0) {
            var arrlist_ = res.data || [];
            var arr_ = []
            for (var i = 0; i < arrlist_.length; i++) {
              arr_.push({value: arrlist_[i]['spu_name']})
            }
            cb(arr_);
          }
        })
      },
      querySearchAsync2(queryString, cb) {
        this.$http('get', "/api/search/getbrand", {
          brand_name: this.formInline.brand_name,
          type:2
        }).then(res => {
          if (res.err_code == 0) {
            var arrlist_ = res.data || [];
            this.brandList = []
            this.formInline.brand_id = ""
            for (var i = 0; i < arrlist_.length; i++) {
              this.brandList.push({value: arrlist_[i]['brand_name'], brand_id: arrlist_[i]['brand_id']})
            }
            cb(this.brandList);
          }
        })
      },
      onCopy(e) {
        this.$message('复制成功');
      },
    },
    components: {
      Menu
    }
  };
</script>
<style scoped>
    @import "../../assets/css/list/inquire.min.css";
</style>