<template>
  <div class="store pagex">
    <div class="store-con">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="型号">
          <el-autocomplete 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 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-select v-model="formInline.status" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="更新日期">
          <el-date-picker v-model="formInline.date" type="daterange" value-format="yyyy-MM-dd" 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">
          <el-dropdown @command="handleCommand">
            <div class="update">修改&nbsp;|<i class="el-icon-arrow-down"></i></div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">修改库存</el-dropdown-item>
              <el-dropdown-item command="2">修改交期</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="fl dcg" @click="downOut">导出</div>
        <div class="fl dcg heti" @click="changeStatus(1)">上架</div>
        <div class="fl dcg heti xjk" @click="changeStatus(3)">下架</div>
      </div>
      <div class="data-box">
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column fixed type="selection" width="37">
          </el-table-column>

          <el-table-column fixed prop="goods_name" label="型号" width="180">
          </el-table-column>
          <el-table-column fixed prop="goods_sn" label="供应商内部型号编码" width="180">
          </el-table-column>
          <el-table-column fixed prop="brand_name" label="品牌" width="180">
          </el-table-column>
          <el-table-column prop="batch_sn" label="封装" width="180">
          </el-table-column>
          <el-table-column prop="moq" label="起订量" width="150">
          </el-table-column>
          <el-table-column prop="mpq" label="标准包装量" width="150">
          </el-table-column>
          <el-table-column prop="stock" label="库存数量" width="150">
          </el-table-column>
          <el-table-column prop="cn_ladder_price" label="国内含税价（￥）" width="140">

            <template slot-scope="scope" v-if="scope.row.cn_ladder_price&&scope.row.cn_ladder_price.length>0">
              <div class="price-more">
                <el-tooltip placement="bottom" effect="light">
                  <div slot="content">
                    <div class="boxxrth2021">
                      <p class="clr" v-for="item in scope.row.cn_ladder_price">
                        <span class="fl">{{item.purchases}}+</span>
                        <span class="fl">&yen;{{item.price}}</span>
                      </p>

                    </div>
                  </div>
                  <div class="more-search-btn">查看更多</div>
                </el-tooltip>
              </div>



            </template>
          </el-table-column>
          <el-table-column prop="hk_ladder_price" label="香港交货价（＄）" width="150">
            <template slot-scope="scope" v-if="scope.row.hk_ladder_price&&scope.row.hk_ladder_price.length>0">
              <div class="price-more">
                <el-tooltip placement="bottom" effect="light">
                  <div slot="content">
                    <div class="boxxrth2021">
                      <p class="clr" v-for="item in scope.row.hk_ladder_price">
                        <span class="fl">{{item.purchases}}+</span>
                        <span class="fl">&yen;{{item.price}}</span>
                      </p>

                    </div>
                  </div>
                  <div class="more-search-btn">查看更多</div>
                </el-tooltip>
              </div>



            </template>
          </el-table-column>
          <el-table-column prop="cn_delivery_time" label="大陆交期" width="150">
          </el-table-column>
          <el-table-column prop="hk_delivery_time" label="香港交期" width="150">
          </el-table-column>
          <el-table-column prop="goods_status" label="状态" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.goods_status==1" class="f-green">上架</span>
              <span v-else-if="scope.row.goods_status==3">下架</span>
            </template>
          </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>
      <!--修改库存弹窗-->
      <el-dialog title="修改库存" :visible.sync="dialogVisible" width="800px">
        <div class="kc-mask">
          <el-table :data="kucundata" border style="width: 100%">


            <el-table-column prop="goods_name" label="型号" min-width="25%">
            </el-table-column>
            <el-table-column prop="brand_name" label="品牌" min-width="25%">
            </el-table-column>
            <el-table-column prop="stock" label="库存数量" min-width="25%">
            </el-table-column>
            <el-table-column label="修改库存" min-width="25%">
              <template slot-scope="scope">

                <el-input v-model="scope.row.updateStock" placeholder="点击修改"
                  onkeyup="if(event.keyCode !=37 &amp;&amp; event.keyCode != 39){if (!/^[\d]+$/ig.test(this.value)){this.value='';}}">
                </el-input>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitKc">确 定</el-button>
        </span>
      </el-dialog>
      <!--修改交期弹窗-->
      <el-dialog title="修改交期" :visible.sync="dialogVisible2" width="800px">
        <div class="kc-mask">
          <el-table :data="huoqidata" border style="width: 100%">


            <el-table-column prop="goods_name" label="型号" min-width="20%">
            </el-table-column>
            <el-table-column prop="brand_name" label="品牌" min-width="20%">
            </el-table-column>
            <el-table-column prop="stock" label="库存数量" min-width="20%">
            </el-table-column>
            <el-table-column label="修改大陆交期" min-width="20%">
              <template slot-scope="scope">
                <div class="updatebox">
                  <el-input v-model="scope.row.dlhq" placeholder="如:2-5">
                  </el-input>
                  <div class="selectdw">
                    <el-select v-model="scope.row.dlhqdw">
                      <el-option label="天" value="天"></el-option>
                      <el-option label="周" value="周"></el-option>
                    </el-select>
                  </div>
                </div>

              </template>
            </el-table-column>
            <el-table-column label="修改香港交期" min-width="20%">
              <template slot-scope="scope">
                <div class="updatebox">
                  <el-input v-model="scope.row.hkhq" placeholder="如:2-5">
                  </el-input>
                  <div class="selectdw">
                    <el-select v-model="scope.row.hkhqdw">
                      <el-option label="天" value="天"></el-option>
                      <el-option label="周" value="周"></el-option>
                    </el-select>
                  </div>
                </div>
              </template>

            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="submitHq">确 定</el-button>
        </span>
      </el-dialog>

    </div>
    <Menu />
  </div>

</template>
<script>
  import Vue from 'vue';
  import Menu from "@/components/menu.vue";
  import Tool from '../../tool'
  import {
    Form,
    FormItem,
    Select,
    Option,
    Input,
    DatePicker,
    Button,
    Dropdown,
    DropdownMenu,
    DropdownItem,
    Table,
    TableColumn,
    Message,
    MessageBox,
    Dialog,
    Pagination,
    Tooltip,
    Autocomplete

  } from 'element-ui'
  Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Tooltip).use(Autocomplete)
  Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination)
  export default {
    name: "list",

    data() {
      return {
        total: 0,
        limit: 10,
        page: 1,
        dialogVisible: false,
        dialogVisible2: false,
        formInline: {
          goods_name: '',
          status: '',
          brand_id: '',
          brand_name: '',
          date: '',

        },
        multipleSelection: [],
        selectData: [],
        huoqidata: [],
        kucundata: [],
        tableData: [],
        brandList:[],
      };
    },
    watch: {
       
       
    },
    created() {
      this.getData()
    },
    computed: {},
    methods: {
      getData() {
        this.$http('get', "/api/sku/list", {
          page: this.page,
          limit: this.limit,
          goods_name: this.formInline.goods_name,
          status: this.formInline.status,
          brand_id: this.formInline.brand_id,
          brand_name:this.formInline.brand_name,
          action_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 || 0;
          } else {
            Message(res.err_msg);
          }
        })
      },
      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/getsku", {
          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
        }).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);
          }
        })
      },
      downOut() {
        this.$http('get', "/api/sku/exportSku", {
          page: this.page,
          limit: this.limit,
          status: this.formInline.status,
          brand_id: this.formInline.brand_id,
          action_time: this.formInline.date[0],
          end_time: this.formInline.date[1]
        }).then(res => {})
      },
      onSubmit() {
        this.page = 1;
        this.getData();
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getData();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCommand(command) {
        if (this.multipleSelection.length == 0) {
          Message("请至少选择一条数据")
          return
        }
        this.selectData = JSON.parse(JSON.stringify(this.multipleSelection));
        if (command == 1) {
          //修改库存弹窗
          this.dialogVisible = true
          this.kucundata = this.selectData
        } else {
          //修改货期弹窗
          this.dialogVisible2 = true
          this.huoqidata = this.selectData
        }
      },
      submitHq() {
        var arr_ = {}
        var self = this;
        for (var i = 0; i < self.huoqidata.length; i++) {
          arr_[self.huoqidata[i]['goods_id']] = {
            cn_delivery_time: self.huoqidata[i]['dlhq'] + (self.huoqidata[i]['dlhqdw'] || '天'),
            hk_delivery_time: self.huoqidata[i]['hkhq'] + (self.huoqidata[i]['hkhqdw'] || '天')
          }

        }
        console.log(arr_)
        this.$http('post', "/api/sku/updateSku", arr_).then(res => {
          if (res.err_code == 0) {
            Message("修改成功");
            this.getData()
            this.dialogVisible2 = false
          } else {
            Message(res.err_msg);
          }
        })

      },
      submitKc() {
        var arr_ = {}
        var self = this;
        for (var i = 0; i < self.kucundata.length; i++) {
          arr_[self.kucundata[i]['goods_id']] = {
            cn_delivery_time: self.kucundata[i]['updateStock']
          }
          console.log(self.kucundata[i]['goods_id'])
        }
        console.log(arr_)
        this.$http('post', "/api/sku/updateSku", arr_).then(res => {
          if (res.err_code === 0) {
            Message("修改成功");
            this.getData()
            this.dialogVisible = false
          } else {
            Message(res.err_msg);
          }
        })
      },
      changeStatus(status) {

        if (this.multipleSelection.length == 0) {
          Message("请至少选择一条数据")
          return
        }
        var arr = [];
        for (var i = 0; i < this.multipleSelection.length; i++) {
          arr.push(this.multipleSelection[i]['goods_id'])
        }
        this.$http('post', "/api/sku/updateSkuStatus", {
          sku_ids: arr.join(","),
          status: status == 1 ? 'passed' : 'offshelf'
        }).then(res => {
          if (res.err_code === 0) {
            Message("操作成功");
            this.getData()
          } else {
            Message(res.err_msg);
          }
        })
      }

    },
    components: {
      Menu
    }
  };
</script>
<style scoped>
  @import "../../assets/css/store/list.min.css";
</style>