<template>
  <div class="goods pagex">
    <div class="goods-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-cascader expand-trigger="hover" placeholder="试试搜索：分类" :options="options" filterable
            @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="关键词">
          <el-input v-model="formInline.keyword" placeholder="请输入关键词"></el-input>
        </el-form-item>

        <el-form-item>
          <div @click="submit" class="search-btn">搜索</div>
        </el-form-item>

      </el-form>
      <div class="btn-nav clr">
        <div class="fl dcg  updatex" @click="updateBrand">修改</div>
        <div class="fl dcg " @click="downOut">导出</div>

      </div>
      <div class="data-box th-all" v-if="tableData">
        <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 prop="spu_name" label="型号" min-width="15%">
          </el-table-column>
          <el-table-column prop="brand_name" label="品牌" min-width="15%">
          </el-table-column>
          <el-table-column prop="encap" label="封装" min-width="15%">
          </el-table-column>
          <el-table-column prop="pdf" label="规格书" min-width="15%">
            <template slot-scope="scope" v-if="scope.row.pdf">
              <a :href="scope.row.pdf" target="_blank" class="pdf"><span class="icon iconfont"></span></a>
            </template>
          </el-table-column>
          <el-table-column prop="images_l" label="图片" min-width="15%">
            <template slot-scope="scope" v-if="scope.row.images_l">
              <img :src="scope.row.images_l" class="brand-img" alt="">
            </template>
          </el-table-column>

          <el-table-column prop="remark" label="型号量" min-width="10%">
          </el-table-column>
          <el-table-column prop="remark" label="商品备注" min-width="15%">
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" min-width="15%">
          </el-table-column>
          <el-table-column prop="update_time" label="更新时间" min-width="15%">
          </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="1000px">
        <div class="kc-mask">
          <el-table :data="updateGoodsdata" border style="width: 100%">
            <el-table-column prop="spu_name" label="型号" min-width="15%">
            </el-table-column>
            <el-table-column prop="brand_name" label="品牌" min-width="15%">
            </el-table-column>
            <el-table-column prop="encap" label="封装" min-width="15%">
            </el-table-column>
            <el-table-column prop="pdf" label="规格书" min-width="15%">
              <template slot-scope="scope" v-if="scope.row.pdf">
                <a :href="scope.row.pdf" target="_blank" class="pdf"><span class="icon iconfont"></span></a>
              </template>
            </el-table-column>
            <el-table-column prop="images_l" label="图片" min-width="15%">
              <template slot-scope="scope" v-if="scope.row.images_l">
                <img :src="scope.row.images_l" class="brand-img" alt="">
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="商品备注" width="320">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remark" placeholder="点击修改"></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="submitUpdate">确 定</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,
    Button,
    Table,
    TableColumn,
    Message,
    MessageBox,
    Dialog,
    Pagination,
    Autocomplete,
    Cascader
  } from 'element-ui'
  Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Pagination)
  Vue.use(TableColumn).use(Table).use(Cascader).use(Autocomplete)
  export default {
    name: "brand",

    data() {
      return {
        dialogVisible: false,
        updateGoodsdata: [],
        total: 0,
        limit: 10,
        page: 1,

        formInline: {
          goods_name: '',
          brand_name: '',
          brand_id: '',
          keyword: '',
          class_id2: '',
          class_id1: ''
        },

        tableData: "",
        multipleSelection: [],
        options: [],
        selectedOptions: []
      };
    },
    watch: {},
    created() {
      this.getData();
      this.getClass();
    },
    computed: {},
    methods: {
      getClass(){
          this.$http('get', "/api/class/get_class_list", {}).then(res => {
          if (res.err_code === 0) {
            var arr_=res.data||[]
            for(var i=0;i<arr_.length;i++){
                var children_arr=[]
                var arr_2= arr_[i].sub_class||[]
                for(var o=0;o<arr_2.length;o++){
                  children_arr.push({
                    value:arr_[i].class_id,
                    label:arr_[i].class_name
                  })
                }
                this.options.push({
                  value:arr_[i].class_id,
                  label:arr_[i].class_name,
                  children:children_arr
                })
            }
          } else {
            Message(res.err_msg);
          }
        })
      },
      getData() {
        this.$http('get', "/api/spu/get_spu_list", {
          page: this.page,
          limit: this.limit,
          brand_id: this.formInline.brand_id,
          brand_name: this.formInline.brand_name,
          spu_name: this.formInline.goods_name,
          keyword: this.formInline.keyword,
          class_id2: this.formInline.class_id2,
          class_id1: this.formInline.class_id1

        }).then(res => {
          if (res.err_code === 0) {

            this.tableData = res.data.list || [];
            this.total = Number(res.data.count) || 0;
          } else {
            Message(res.err_msg);
          }
        })
      },
      updateBrand() {
        if (this.multipleSelection.length > 1) {
          Message("只能选择一条数据")
          return
        }
        if (this.multipleSelection.length == 0) {
          Message("请至少选择一条数据")
          return
        }
        this.updateGoodsdata = JSON.parse(JSON.stringify(this.multipleSelection));
        this.dialogVisible = true
      },
      submitUpdate() {
        var arr_ = {
          id: this.updateGoodsdata[0].spu_id,
          remark: this.updateGoodsdata[0].remark
        }
        this.$http('post', "/api/spu/update_spu", arr_).then(res => {
          if (res.err_code == 0) {
            Message("修改成功");
            this.getData()
            this.dialogVisible = false
          } 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/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
        }).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);
          }
        })
      },
      submit() {
        this.page = 1;
        this.getData();
      },

      downOut() {
        this.$http('post', "/api/brand/export_spu", {
          spu_name: this.formInline.goods_name,
          brand_id: this.formInline.brand_id,
          class_id2: this.formInline.class_id2,
          class_id1: this.formInline.class_id1,
          keyword: this.formInline.keyword,
        }).then(res => {})

      },
      handleCurrentChange(val) {
        this.page = val;
        this.getData();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val || [];
        console.log(this.multipleSelection)
      },
      handleChange(value) {
        console.log(value);
        this.formInline.class_id1=value[0]
        this.formInline.class_id2=value[1]
      }

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