<template>
  <div class="brandxk pagex">
    <div class="brand-con">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="品牌">
          <el-autocomplete v-model="formInline.brand_name" :trigger-on-focus="false" @keyup.enter.native="submit"
            :fetch-suggestions="querySearchAsync2" placeholder="请输入品牌" @select="handleSelectBrandName">
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="关键词">
          <el-input v-model="formInline.keyword" placeholder="请输入关键词" @keyup.enter.native="submit"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submit">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="btn-nav clr">
        <el-button type="primary" @click="updateBrand">修改</el-button>
        <el-button type="primary" @click="downOut">导出</el-button>
        <el-button type="danger" @click="del">删除</el-button>
        <a :href="downHref" ref="downs" target="_blank" style="display:none">下载</a>
      </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="internal_standard_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="region" label="地区" min-width="15%">
          </el-table-column>
          <el-table-column prop="brand_logo" label="LOGO" min-width="10%">
            <template slot-scope="scope" v-if="scope.row.brand_logo">
              <img :src="scope.row.brand_logo" class="brand-img" alt="">
            </template>
          </el-table-column>

          <el-table-column prop="sku_num" 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="updateBranddata" border style="width: 100%">
            <el-table-column prop="brand_name" label="品牌" width="180">
            </el-table-column>
            <el-table-column prop="region" label="地区" width="100">
            </el-table-column>
            <el-table-column prop="brand_logo" label="LOGO" min-width="120">
              <template slot-scope="scope" v-if="scope.row.brand_logo">
                <img :src="scope.row.brand_logo" class="brand-img" alt="">
              </template>
            </el-table-column>
            <el-table-column prop="internal_standard_name" label="内部标准名称" min-width="170">
              <template slot-scope="scope">
                <el-input v-model="scope.row.internal_standard_name" placeholder="点击修改"></el-input>
              </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
  } from 'element-ui'
  Vue.prototype.$message=Message
  Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Pagination).use(
    Autocomplete)
  Vue.use(TableColumn).use(Table)
  export default {
    name: "brand",

    data() {
      return {
        dialogVisible: false,
        updateBranddata: [],
        total: 0,
        limit: 10,
        page: 1,
        downHref: "",
        formInline: {
          brand_name: '',
          brand_id: '',
          keyword: ''
        },
        disabled: false,
        tableData: "",
        timer: null,
        multipleSelection: []
      };
    },
    watch: {
      'formInline.brand_name'(val){
        if(!val){
          this.formInline.brand_id=""
          return
        }
        var arr_=[]
        this.brandList=this.brandList||[]
        for(var i=0;i<this.brandList.length;i++){
          arr_.push(this.brandList[i].value)
        }
        if(arr_.indexOf(val)==-1){
          this.formInline.brand_id=""
        }
      }
    },
    created() {
      this.getData();
    },
    computed: {},
    methods: {
      getData() {
        this.$http('get', "/api/brand/get_brand_list", {
          page: this.page,
          limit: this.limit,
          brand_id: this.formInline.brand_id,
          brand_name: this.formInline.brand_name,
          keyword: this.formInline.keyword,

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

            this.tableData = res.data.list || [];
            this.total = Number(res.data.total) || 0;
          } else {
            this.$message(res.msg);
          }
        })
      },
      updateBrand() {
        if (this.multipleSelection.length > 1) {
          this.$message("只能选择一条数据")
          return
        }
        if (this.multipleSelection.length == 0) {
          this.$message("请至少选择一条数据")
          return
        }
        this.updateBranddata = JSON.parse(JSON.stringify(this.multipleSelection));
        this.dialogVisible = true
      },
      submitUpdate() {
        var arr_ = {
          id: this.updateBranddata[0].id,
          remark: this.updateBranddata[0].remark,
          internal_standard_name: this.updateBranddata[0].internal_standard_name
        }
        this.$http('post', "/api/brand/update_brand", arr_).then(res => {
          if (res.code == 0) {
            this.$message("修改成功");
            this.getData()
            this.dialogVisible = false
          } else {
            this.$message(res.msg);
          }
        })
      },
      querySearchAsync2(queryString, cb) {
        this.$http('get', "/api/search/getbrand", {
          brand_name: this.formInline.brand_name
        }).then(res => {
          if (res.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);
          }
        })
      },
      handleSelectBrandName(item) {
        console.log(this.brandList)
        this.formInline.brand_name = item.value;
        this.formInline.brand_id = item.brand_id;
      },
      submit() {
        if(this.formInline.keyword&&this.formInline.keyword.length==1){
          this.$message("关键词不能少于2个字符");
          return
        }
        this.page = 1;
        this.getData();
      },

      downOut() {
        if (this.disabled) {
          this.$message("正在导出中,请不要重复点击");
          return
        }
        this.$http('post', "/api/brand/export_brand", {
          brand_id: this.formInline.brand_id,
          brand_name: this.formInline.brand_name,
          keyword: this.formInline.keyword,
        }).then(res => {
          if (res.code == 0) {
            this.disabled = true
            this.$message("正在导出中,请耐心等待")
            this.timer = setInterval(() => {
              if (!this.disabled) {
                clearInterval(this.timer)
                return
              }
              this.resultDown(res.data)
            }, 3000)
          }
        })
      },
      resultDown(id_) {
        this.$http('get', "/api/export/get_export_data", {
          id: id_
        }).then(res => {
          if (res.code == 0) {
            this.disabled = false
            this.$message("导出成功")
            this.downHref = res.data
            setTimeout(() => {
              this.$refs.downs.click()
            }, 10)
          } else if (res.code == -1) {
            //导出失败
            this.$message(res.data)
            this.disabled = false
          }
        }, error => {
          this.$message('网络出现问题,请检查网络');
          this.disabled = false
        })

      },
      del() {
        if (this.multipleSelection.length == 0) {
          this.$message("请至少选择一条数据")
          return
        }
        var arr = [];
        for (var i = 0; i < this.multipleSelection.length; i++) {
          arr.push(this.multipleSelection[i]['id'])
        }
        MessageBox.confirm('确认到删除当前勾选数据吗？', {
            type: 'error'

          })
          .then(() => {
            this.$http('post', "/api/brand/delete_brand", {
              id: arr.join(",")
            }).then(res => {
              if (res.code === 0) {
                this.$message("删除成功");
                this.getData()
              } else {
                this.$message(res.msg);
              }
            })
          }).catch(()=>{

          })

      },
      handleCurrentChange(val) {
        this.page = val;
        this.getData();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val || [];
        console.log(this.multipleSelection)
      }

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