<template>
  <div class="yqshop-wrapper">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="yqshop-content screenSet" id="screenSet">
      <div class="header-title">商品管理</div>
      <el-form ref="searchForm" :model="searchForm" label-width="80px" label-suffix=":" :inline="true">
        <el-row :gutter="30" type="flex" style="margin-top: 10px">
          <el-col :span="18">
            <el-form-item label="商品名称">
              <el-input v-model="searchForm.name" size="small" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品ID">
              <el-input v-model="searchForm.id" size="small" placeholder="请输入商品ID"></el-input>
            </el-form-item>
            <el-form-item label="商品类型">
              <el-select
                  v-model="searchForm.type"
                  placeholder="请选择商品类型"
                  size="small"
                  clearable>
                <el-option
                    v-for="(item,index) in typeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button type="primary" size="small" @click="searchList">查询</el-button>
            <el-button type="default" size="small" @click="resetForm" style="margin-left:0;">重置</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="30" type="flex" style="margin-top: 10px">
          <el-col :span="18">
            <el-button type="primary" size="small" @click="batchOpt(1)">批量上架</el-button>
            <el-button type="primary" size="small" @click="batchOpt(2)">批量下架</el-button>
          </el-col>

          <el-col :span="6" style="text-align: right">
            <el-button type="primary" size="small" @click="batchOpt(3)">批量导入</el-button>
            <el-button type="primary" size="small" @click="edit('add')">新建单个商品</el-button>
          </el-col>
        </el-row>

      </el-form>
      <el-table :data="tableData" class="item-table" style="width: 100%;margin-top: 10px;" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          fixed
          width="55">
        </el-table-column>
        <el-table-column prop="id" label="商品ID" width="120" align="center"></el-table-column>
        <el-table-column prop="name" label="商品名称" min-width="140" align="center"></el-table-column>
        <el-table-column prop="type" label="商品类型" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.type | dynamicFlagStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="商品状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status | rangeStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="销量" min-width="120" align="center">
          111
        </el-table-column>
        <el-table-column prop="num" label="规格" min-width="120" align="center">
          111
        </el-table-column>
        <el-table-column prop="num" label="价格" min-width="120" align="center">
          111
        </el-table-column>
        <el-table-column prop="createdTime" label="发布时间" width="150" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createdTime | liveDateFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="370" align="center" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="shelfOpt(scope.row,1)" type="text" size="small">下架</el-button>
              <el-button @click="shelfOpt(scope.row,2)" type="text" size="small">上架销售</el-button>
              <el-button @click="shelfOpt(scope.row,3)" type="text" size="small">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleNumChange"
            :current-page="searchForm.pageNo"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRows"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      title="批量导入"
      :visible.sync="batchDialog"
      width="30%"
      center>
      <div class="batch-dia">
        <div class="batch-dia-item">
          <span class="s-l">1、下载模板</span>
          <span class="s-r"><i class="el-icon-upload"></i>下载</span>
        </div>
        <div class="batch-dia-item">
          <span class="s-l">2、根据模板填写信息</span>

        </div>
        <div class="batch-dia-item">
          <span class="s-l">3、上传文件</span>
          <span class="s-r">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"

              :file-list="fileList">
                 <i class="el-icon-upload"></i>上传
            </el-upload>
           </span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" style="text-align: right;">
        <!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="batchDialog = false">完成</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "@/components/breadcrumb.vue";
  import { getRangeList,updateRangeStatus} from "../../utils/yqrange/yqrangeApi";
  export default {
    components: {
      BreadCrumb
    },
    data(){
      return{
        curmbFirst: '云鹊店铺',
        showAllFlag: false,
        showNewFlag: false,
        batchDialog:false,
        searchForm: {
          name: '',
          id: '',
          type: '',
          pageNo: 1,
          pageSize: 10,
        },
        fileList:[],
        totalRows: 0,
        tableData: [
          {}
        ],
        typeList: [{
          label: '药品',
          value: '1',
        }, {
          label: '药品器械',
          value: '2',
        }, {
          label: '其他',
          value: '3',
        }]
      }
    },
    created() {
      // this.initPrivilege();
      // this.searchList();
    },
    methods: {
      handlePreview(){},
      handleRemove(){},
      beforeRemove(){},
      handleSelectionChange(){

      },
      //批量 上下架操作
      batchOpt(type){
        if(type == 3){//批量导入
          this.batchDialog = true
        }
      },
      edit(row){
        let url = ''
        if(row == 'add'){
          url = `/create-good?id=add`
        }else{
          url = `/create-good?id=${row.id}`
        }
        this.$router.push({
          path: url
        })
      },

      //上架  下架
      shelfOpt(row,type){
        let str = '',
            btn1 = '',
            btn2 = ''
        if(type == 1){
          str = `确定下架商品吗？<br/>下架后将不再出售`
          btn1 = '下架'
        }else if(type == 2){
          str = `确定上架商品吗？<br/>上架后将开始出售`
          btn1 = '上架'
        }else if(type == 3){
          str = `确定删除商品吗？<br/>删除后商品信息将都不保留`
          btn1 = '删除'
        }
        this.$confirm(str, '', {
          confirmButtonText: btn1,
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'range-make-box',
          dangerouslyUseHTMLString:true
        }).then(() => {
          //  confirm
         // this.updateStatus(row.id, "30");
        }).catch(() => {
          //  cancel
          // this.$message.error("上线失败");
        });
      },

      initPrivilege(){
        let idType = localStorage.getItem('storageIdType');
        this.searchForm.userType = idType;
        // 内部用户:运营人员
        if(idType == "1"){
          this.showAllFlag = true;
          this.showNewFlag = true;
        }
        // 外部用户
        else if(idType == "2"){
          this.showAllFlag = false;
          this.getUserAuth();
        }
      },
      // 外部用户权限
      getUserAuth(){
        let highMainManager = localStorage.getItem('highMainManager');
        let mainManager = localStorage.getItem('mainManager');
        let manager = localStorage.getItem('manager');

        if(highMainManager == "1" || mainManager == "1"){
          this.showNewFlag = true;
        }
        else if(manager == "1"){
          this.showNewFlag = false;
        }
      },

      searchList() {
        openLoading(this);
        let params = this.searchForm;
      },

      resetForm() {
        this.searchForm = {
          name: '',
          id: '',
          type: ''
        };
        this.searchList();
      },


      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.searchForm.pageNo = 1;
        this.searchList();
      },
      handleNumChange(val) {
        this.searchForm.pageNo = val;
        this.searchList();
      },
    },
  }
</script>
<style lang="scss">
  .yqshop-wrapper{
    .yqshop-content{
      background: #fff;
      padding: 10px;
      .header-title{
        padding: 10px 12px;
        font-size: 13px;
        color: #449284;
        border-bottom: 1px solid #efefef;
      }
    }
    .el-button--text{
      color: #449284;
      font-size: 14px;
      &::after{
        content: '';
        position: relative;
        height: 14px;
        /*border-right: 1px solid #EBEEF5;*/
        border-right: 1px solid #aaaaaa;
        padding-right: 10px;
      }
      &:last-of-type{
        &::after{
          content: '';
          position: relative;
          width: 1px;
          height: 14px;
          border-right: none;
        }
      }
    }
  }
  .batch-dia{
    .batch-dia-item{overflow: hidden;
      .s-l,.s-r{
        float: left;
        padding:10px 0;
        color:#666
      }
      .s-l{
        margin-right: 100px;

      }
      .s-r{
        color:#1989fa;
        cursor: pointer;
      }
      .el-icon-upload{

      }
    }
  }
</style>
