<template>
    <section class="store pagex">
        <div class="store-con">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="型号">
                    <el-input v-model="formInline.goods_name" placeholder="请输入型号"></el-input>
                </el-form-item>
                <el-form-item label="品牌">
                    <el-select v-model="formInline.brand" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </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%"></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 {
    Form,
    FormItem,
    Select,
    Option,
    Input,
    DatePicker,
    Button,
    Dropdown,
    DropdownMenu,
    DropdownItem,
    Table,
    TableColumn,
    Message,
    MessageBox,
    Dialog,
    Pagination
  } from 'element-ui'

  Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog);
  Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination);

  export default {
    name: "inquire",
    data() {
      return {
        total: 0,
        limit: 1,
        page: 1,
        tableData: [],
        multipleSelection: [],
        formInline: {
          goods_name: '',
          brand: '',
          date: ''
        }
      };
    },
    watch: {},
    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: this.formInline.brand,
          start_time: this.formInline.date[0],
          end_time: this.formInline.date[1]
        }).then(res => {
          if (res.err_code === 0) {
            this.tableData = res.data.list || [];
            this.total = res.data.count || 3;
          } else {
            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) {
          Message("请至少选择一条询价信息");
          return;
        }


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

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


        this.$router.push({
          path:'/inquire/detail?id='+arr.join(",")
        })
      },
      exportChange() {
        var arr = [];
        if (this.multipleSelection.length == 0) {
          Message("请至少选择一条数据");
          return;
        }

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

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


      },
      del() {
        var arr = [];
        if (this.multipleSelection.length == 0) {
          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) {
              Message("删除成功");
              this.getData();
            } else {
              Message(res.err_msg);
            }
          })
        })
      }
    },
    components: {
      Menu
    }
  };
</script>
<style scoped>
    @import "../../assets/css/list/inquire.min.css";
</style>