<template>
    <section class="inquireDetail pagex">
        <div class="inquiry-information boxsiz">
            <p class="tit">询价信息</p>
            <div class="input-box">
                <span class="p-text">型号</span>
                <input type="text" placeholder="" disabled :value="inquiry_info.goods_name" style="width: 176px;margin-right: 30px; "/>
                <span class="p-text">品牌</span>
                <input type="text" placeholder="" disabled :value="inquiry_info.brand_name" style="width: 100px;margin-right: 30px; "/>
                <span class="p-text">数量</span>
                <input type="text" placeholder="" disabled :value="inquiry_info.inquiry_number" style="width: 100px ;margin-right: 30px;"/>
                <span class="p-text">批次</span>
                <input type="text" placeholder="" disabled :value="inquiry_info.batch" style="width: 100px;margin-right: 30px; "/>
                <span class="p-text">交货日期</span>
                <input type="text" placeholder="" disabled :value="inquiry_info.delivery_time" style="width: 100px;margin-right: 30px; "/>
                <span class="p-text">询价单号</span>
                <input type="text" placeholder="" disabled :value="inquiry_info.inquiry_sn" style="width: 138px "/>
            </div>
            <p class="text">
                <span>状态：</span>
                <em v-if="inquiry_info.status == 1">待报价</em>
                <em v-else-if="inquiry_info.status == 9">待报价</em>
                <em v-else-if="inquiry_info.status == -1">已关闭</em>
                <em v-else-if="inquiry_info.status == 2">已报价</em>
            </p>
        </div>
        <div class="quote boxsiz">
            <p class="tit">询价信息</p>
            <div class="btn-nav clr">
                <div class="fl dcg" @click="added" style="margin-left: 0px;">新增</div>
                <div class="fl dcg  updatex">修改</div>
                <div class="fl dcg delbtn" @click="del">删除</div>
            </div>
            <div class="data-box th-all">
                <el-table :data="quote_list" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column prop="goods_name" label="报价型号" width="200"></el-table-column>
                    <el-table-column prop="brand_name" label="报价品牌" width="200"></el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status==1" class="f-green">已报价</span>
                            <span v-else-if="scope.row.status==2" class="f-yellow1">已选中</span>
                            <span v-else-if="scope.row.status==3">已确认</span>
                            <span v-else-if="scope.row.status==5" class="f-red1">已关闭</span>
                            <span v-else-if="scope.row.status==9" class="f-red1">已删除</span>
                            <span v-else-if="scope.row.status==-1" class="f-red1">已撤销</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="expire_status_val" label="是否有效" width="100"></el-table-column>
                    <el-table-column prop="quote_number" label="报价数量" width="100"></el-table-column>
                    <el-table-column prop="price_origin" label="价格" width="100"></el-table-column>
                    <el-table-column prop="currency" label="币种" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.currency==1">人民币</span>
                            <span v-else-if="scope.row.currency==2">美元</span>
                            <span v-else-if="scope.row.currency==3">港币</span>
                            <span v-else-if="scope.row.currency==4">欧元</span>
                            <span v-else-if="scope.row.currency==5">英磅</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tax_rate" label="税率" width="100"></el-table-column>
                    <el-table-column prop="batch" label="批次" width="100"></el-table-column>
                    <el-table-column prop="delivery_time" label="货期" width="100"></el-table-column>
                    <el-table-column prop="mpq" label="最小包装数量" width="200"></el-table-column>
                    <el-table-column prop="moq" label="起订量" width="100"></el-table-column>
                    <el-table-column prop="price_other" label="其他费用" width="100"></el-table-column>
                    <el-table-column prop="expire_time" label="报价有效期" width="200"></el-table-column>
                    <el-table-column prop="remark" label="备注" width="200"></el-table-column>
                    <el-table-column prop="create_time" label="最近报价时间" width="200"></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="assistant">
            <i class="ic"></i>
            <ul class="tab row verCenter">
                <li class="boxsiz row rowCenter verCenter curr">匹配库存</li>
                <li class="boxsiz row rowCenter verCenter">历史报价</li>
            </ul>
            <div class="data-box th-all">
                <el-table :data="quote_list" border style="width: 100%" @selection-change="handleSelectionChange">
                    <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%"></el-table-column>
                </el-table>
            </div>
        </div>
        <!--新增弹窗-->
        <el-dialog title="新增" :visible.sync="dialogVisible" width="656px" class="xx">
            <div class="dialog-form">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <div class="row bothSide">
                        <div class="box">
                            <el-form-item label="报价型号" prop="goods_name">
                                <el-input v-model="ruleForm.goods_name" placeholder="请输入型号"></el-input>
                            </el-form-item>
                            <el-form-item label="报价数量" prop="quote_number">
                                <el-input v-model="ruleForm.quote_number" placeholder="请输入数量"></el-input>
                            </el-form-item>
                            <el-form-item label="币种">
                                <el-select v-model="ruleForm.currency" @change="currentChange">
                                    <el-option label="RMB" value="1"></el-option>
                                    <el-option label="USD" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="批次" prop="batch">
                                <el-input v-model="ruleForm.batch" placeholder="请输入D/C"></el-input>
                            </el-form-item>
                            <el-form-item label="最小包装数量">
                                <el-input v-model="ruleForm.mpq" placeholder="请输入MPQ"></el-input>
                            </el-form-item>
                            <el-form-item label="其他费用" class="updatebox">
                                <el-input placeholder="" v-model="ruleForm.price_other" placeholder="请输入其他费用"></el-input>
                                <div class="selectdw">
                                    <el-select v-model="ruleForm.unit" placeholder="RGB" class="placehoload">
                                        <el-option label="RGB" value="RGB"></el-option>
                                        <el-option label="USD" value="USD"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </div>
                        <div class="box">
                            <el-form-item label="报价品牌" prop="brand_s">
                                <el-input v-model="ruleForm.brand_s" placeholder="请输入品牌"></el-input>
                            </el-form-item>
                            <el-form-item label="价格" prop="price_origin">
                                <el-input v-model="ruleForm.price_origin" placeholder="请输入价格"></el-input>
                            </el-form-item>
                            <el-form-item label="税率">
                                <el-input disabled v-model="ruleForm.tax_rate" style="width: 100px"></el-input>
                            </el-form-item>
                            <el-form-item label="货期" prop="delivery_time" class="updatebox">
                                <el-input placeholder="" v-model="ruleForm.delivery_time"></el-input>
                                <div class="selectdw">
                                    <el-select v-model="ruleForm.dlhqdw" placeholder="天" class="placehoload">
                                        <el-option label="天" value="天"></el-option>
                                        <el-option label="周" value="周"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                            <el-form-item label="起订量">
                                <el-input v-model="ruleForm.moq" placeholder="请输入起订量"></el-input>
                            </el-form-item>
                            <el-form-item label="报价有效期" prop="expire_time">
                                <el-date-picker type="date" placeholder="选择报价有效期" v-model="ruleForm.expire_time"></el-date-picker>
                            </el-form-item>
                        </div>
                    </div>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="ruleForm.remark" placeholder="请输入备注"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
        <Menu/>
    </section>
</template>
<script>
  import Vue from 'vue';
  import Menu from "@/components/menu.vue";
  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: "InquireDetail",
    data() {
      return {
        total: 0,
        limit: 1,
        page: 1,
        tableData: [],
        multipleSelection: [],
        quote_info: {},
        inquiry_info: {},
        quote_list: [],
        ruleForm: {
          goods_name: '',
          quote_number: '',
          currency: '1',
          batch: '',
          mpq: '',
          price_other: '',
          unit: '',
          brand_s: '',
          price_origin: '',
          tax_rate: '13%',
          delivery_time: '',
          dlhqdw: '',
          moq: '',
          expire_time: '',
          remark: ''
        },
        rules: {
          goods_name: [
            {required: true, message: '请输入报价型号', trigger: 'blur'}
          ],
          quote_number: [
            {required: true, message: '请输入报价数量', trigger: 'blur'}
          ],
          currency: [
            {required: true, message: '请选择币种', trigger: 'blur'}
          ],
          batch: [
            {required: true, message: '请输入批次', trigger: 'blur'}
          ],
          brand_s: [
            {required: true, message: '请选择报价品牌', trigger: 'blur'}
          ],
          price_origin: [
            {required: true, message: '请输入价格', trigger: 'blur'},
            {type: 'number', message: '价格必须为纯数字'}
          ],
          delivery_time: [
            {required: true, message: '请输入货期', trigger: 'blur'}
          ],
          expire_time: [
            {required: true, message: '请输入报价有效期', trigger: 'blur'}
          ]
        },
        dialogVisible: true
      };
    },
    watch: {},
    created() {
      this.getData();
    },
    methods: {
      getData() {
        console.log(this.$route)
        this.$http('get', "/api/inquiry/detail", {
          inquiry_item_id: this.$route.query.id
        }).then(res => {
          if (res.err_code === 0) {
            this.inquiry_info = res.data.inquiry_info;
            this.quote_list = res.data.quote_list;
          } else {
            Message(res.err_msg);
          }
        })
      },
      onSubmit() {
        this.page = 1;
        this.getData();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      added() {
        this.dialogVisible = true;
      },
      currentChange(val) {
        if (val == 1) {
          this.ruleForm.tax_rate = '13%';
        } else if (val == 2) {
          this.ruleForm.tax_rate = '0';
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      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/inquireDetail.min.css";
</style>