<template>
  <section class="inquire pagex">
    <div class="inquire-con">
      <el-form :inline="true" :model="formParam" class="demo-form-inline" ref="formParam">
        <el-form-item label="型号" prop="goods_name">
          <el-autocomplete v-model="formParam.goods_name" :trigger-on-focus="false" @keyup.enter.native="onSubmit" :fetch-suggestions="querySearchAsync" placeholder="请输入型号" clearable></el-autocomplete>
        </el-form-item>
        <el-form-item label="品牌" prop="brand_name">
          <el-autocomplete v-model="formParam.brand_name" :trigger-on-focus="false" @keyup.enter.native="onSubmit" :fetch-suggestions="querySearchAsyncBrand" placeholder="请输入品牌" clearable></el-autocomplete>
        </el-form-item>
        <el-form-item label="状态" prop="i_status">
          <el-select v-model="formParam.i_status" placeholder="请选择" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option label="已关闭" value="-1"></el-option>
            <el-option label="待报价" value="1"></el-option>
            <el-option label="已报价" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="询价日期">
          <el-date-picker v-model="formParam.date" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button @click="resetForm('formParam')">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="btn-nav clr">
        <el-button type="primary" @click="detail">报价</el-button>
        <el-button type="primary" @click="exportChange">导出</el-button>
        <el-button type="danger" @click="del">删除</el-button>
      </div>
      <div class="data-box">
        <el-table :data="tableData" border max-height="600" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40" align="center"></el-table-column>
          <el-table-column prop="inquiry_sn" label="询价单号" width="160" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="goods_name" label="型号" width="160" :show-overflow-tooltip="true">
            <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="品牌" width="150" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="inquiry_number" label="数量" width="80" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="batch" label="批次" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="delivery_time" label="交货日期"  :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="i_status" label="状态" width="100" :show-overflow-tooltip="true">
            <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="报价数" width="100" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="inquiry_time" label="询价时间" width="160" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="deadline_time" label="询价有效期" width="160" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column fixed="right" label="操作" width="110" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="primary" size="mini" class="yunyin-btn">查看日志</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 200]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
      </div>
    </div>
    <Menu/>
    <el-dialog title="询价管理日志" :close-on-click-modal="false" :visible.sync="dialogVisible" width="1000px">
      <el-table :data="logs" border max-height="600">
        <el-table-column prop="create_time" label="时间" min-width="150" align="center"></el-table-column>
        <el-table-column prop="message" label="操作说明" min-width="150" align="center"></el-table-column>
        <el-table-column prop="operator" label="操作人" min-width="150" align="center"></el-table-column>
      </el-table>
    </el-dialog>
  </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 {Autocomplete, Button, DatePicker, Dialog, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, Message, MessageBox, Option, Pagination, Select, Table, TableColumn} 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: [],
      dialogVisible: false,
      logs:[],
      formParam: {
        goods_name: '',
        brand_name: '',
        i_status: '',
        date: ''
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$http('get', "/api/inquiry/getlist", {
        page: this.page,
        limit: this.limit,
        goods_name: this.formParam.goods_name,
        brand_name: this.formParam.brand_name,
        start_time: this.formParam.date ? this.formParam.date[0] : '',
        end_time: this.formParam.date ? this.formParam.date[1] : '',
        i_status: this.formParam.i_status
      }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list || [];
          this.total = res.data.total;
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      })
    },
    //型号
    querySearchAsync(queryString, cb) {
      this.$http('get', "/api/search/getspu", {
        spu_name: queryString
      }).then(res => {
        if (res.code == 0) {
          if (res.data.list.length > 0) {
            var arrlist_ = res.data.list || [];
            var arr_ = []
            for (var i = 0; i < arrlist_.length; i++) {
              arr_.push({
                value: arrlist_[i]['spu_name']
              })
            }
            cb(arr_);
          } else {
            cb([]);
          }
        }
      })
    },
    //品牌
    querySearchAsyncBrand(queryString, cb) {
      this.$http('get', "/api/brand/get_stand_brand", {
        brand: queryString
      }).then(res => {
        if (res.code == 0) {
          if (res.data.list.length > 0) {
            var arrlist_ = res.data.list || [];
            var arr_ = []
            for (var i = 0; i < arrlist_.length; i++) {
              arr_.push({
                value: arrlist_[i]
              })
            }
            cb(arr_);
          } else {
            cb([]);
          }
        }
      })
    },
    resetForm(formName) {
      this.formParam.date='';
      this.$refs[formName].resetFields();
    },
    onSubmit() {
      this.page = 1;
      this.getData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    dateFormat(row, column) {
      let date = row.create_time;
      return dateTimeFormate(date);
    },
    getLogs(obj_type, obj_id) {
      this.$http('GET', "/api/log/getLogs", {
        obj_type: obj_type,
        obj_id: obj_id
      }).then(res => {
        if (res.code === 0) {
          this.dialogVisible = true;
          this.logs = res.data.list;
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      });
    },
    handleClick(row) {
      this.getLogs(504, row.supplier_auto_inquiry_id);
      console.log(row);
    },
    detail() {
      var arr = [];
      if (this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          message: '请至少选择一条询价信息',
          type: 'warning'
        });
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.$message({
          showClose: true,
          message: '请选择一条询价信息',
          type: 'warning'
        });
        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({
          showClose: true,
          message: '该订单不可报价',
          type: 'warning'
        });
        return;
      }
    },
    exportChange() {
      var arr = [];
      if (this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          message: '请至少选择一条数据',
          type: 'warning'
        });
        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({
          showClose: true,
          message: '请勾选数据删除',
          type: 'warning'
        });
        return false;
      }

      var status_arr = this.multipleSelection.map(obj => {
        return obj.i_status;
      })
      let status = status_arr.every(ele => ele === 1);// -1已关闭1待报价2已报价9删除

      if (status) {
        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.code === 0) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getData();
            } else {
              this.$message({
                message: res.msg,
                type: 'warning'
              });
            }
          })
        }).catch(() => {

        })
      } else {
        this.$message({
          message: '请勾选待报价的数据',
          type: 'warning'
        });
      }
    },
    onCopy(e) {
      this.$message({
        message: '复制成功',
        type: 'success'
      });
    },
  },
  components: {
    Menu
  }
};
</script>
<style scoped>
@import "../../assets/css/list/inquire.min.css";
</style>