<template>
  <div class="app-container">

    <div class="filter-container" style="margin-bottom: 10px;">
      <el-input
        v-model="listQuery.keyword"
        size="small"
        placeholder="请输入关键词"
        clearable
        class="filter-item"
        style="width: 200px;margin-left: 10px;"
      />
      <el-button-group style="margin-left: 10px;">
        <el-button
          size="small"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="search"
        >
          搜索
        </el-button>
      </el-button-group>
    </div>

    <el-row :gutter="24" class="row-container">

        <el-table
          ref="productTable"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          height="80%"
          class="table-container"
          highlight-current-row
          @row-click="handleRowClick"
          @selection-change="getSelection"
        >

          <el-table-column
            align="center"
            type="selection"
            width="55">
          </el-table-column>

          <el-table-column
            label="序号"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.$index+1 }}
            </template>
          </el-table-column>

          <el-table-column
            label="会员"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.memberName }}
            </template>
          </el-table-column>

          <el-table-column
            label="手机号"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.memberPhone }}
            </template>
          </el-table-column>

          <el-table-column
            label="下单时间"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>

          <el-table-column
            label="操作人"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.createName }}
            </template>
          </el-table-column>

          <el-table-column
            label="门店名"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.shopName }}
            </template>
          </el-table-column>



          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <el-button-group>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="del(scope)"
                >
                  删除
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="fetchData"
        />

        <div class="div-border" style="height: 29%;margin-top:15px;">
          <el-alert
            type="warning"
            :closable="false">
            <template slot="title">
              已选择的条目：{{productList.length}}个
              <el-button style="margin-left: 15px;"
                         @click="chooseDone"
                         icon="el-icon-check"
                         type="danger">选好了</el-button>
            </template>
          </el-alert>

          <div class="tag-view">
            <el-tag
              v-for="(tag,index) in productList"
              :key="tag.productId"
              closable
              effect="dark"
              @close="handleClose(tag,index)"
            >
              {{tag.memberName}}
            </el-tag>
          </div>

        </div>
    </el-row>

  </div>
</template>

<script>
  import {deleteProduct} from "@/api/business/product/product";
  import {deepClone,success} from "@/utils";
  import {deleteSelljson, getSelljsonPage} from "@/api/business/sellJson/sellJson";
  import confirm from "@/utils/confirm";
  import Pagination from '@/components/Pagination'
  import addForm from "@/views/business/product/addProduct";
  import editForm from "@/views/business/product/editProduct";
  import {error} from "@/utils";

  export default {
    name: 'productList',
    components: {addForm,editForm,Pagination},
    data() {
      return {
        total: 0,
        list: [],
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 50,
          keyword: '',
          pendingStatus:0
        },
        defaultProps: {
          id: 'categoryId',
          label: 'categoryName',
        },
        temp: {},
        productList: []
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      handleClose(tag,index){
        this.productList.splice(index,1);
        //取消选中状态
        this.$refs.productTable.toggleRowSelection(tag, false);
      },
      chooseDone(){
        if(this.productList.length==0){
          error('还没有选择订单')
          return false
        }
        this.$emit('ok', this.productList[0])

        const table = this.$refs.productTable;
        const rows = table.store.states.data; // 获取表格所有行的数据（不同组件获取方式可能不同）
        rows.forEach(row => {
          table.toggleRowSelection(row, false); // 调用toggleRowSelection方法，第二个参数传false表示取消选中
        });

      },
      handleRowClick(row) {
        //先删除所选中的 只选当前行
        const table = this.$refs.productTable;
        const rows = table.store.states.data; // 获取表格所有行的数据（不同组件获取方式可能不同）
        rows.forEach(row => {
          table.toggleRowSelection(row, false); // 调用toggleRowSelection方法，第二个参数传false表示取消选中
        });

        this.$refs.productTable.toggleRowSelection(row)
      },
      getSelection(e){
        this.productList = e
      },
      handleNodeClick(e){
        this.listQuery.categoryId =  e.categoryId
        this.fetchData()
      },
      search() {
        this.fetchData()
      },
      refresh() {
        this.listQuery = this.$options.data().listQuery
        this.fetchData()
      },
      fetchData() {
        this.listLoading = true
        getSelljsonPage(this.listQuery).then(response => {
          const { records, total } = response.data
          this.list = records
          this.total = total
          this.listLoading = false
        })
      },
      add(){
        this.$refs.addForm.open(this.listQuery.categoryId)
      },
      addOk(){
        this.fetchData()
      },
      edit(scope) {
        const temp = deepClone(scope.row)
        this.$refs.editForm.open(temp)
      },
      editOk(){
        this.fetchData()
      },
      del(scope) {
        confirm("确定要删除吗？").then(res=>{
          if(res){
            deleteSelljson(scope.row.jsonId).then(response => {
              console.log(response)
              success('删除成功')
              this.fetchData()
            })
          }
        })
      },
    }
  }
</script>

<style scoped>
  .tag-view /deep/ .el-tag {
    margin: 10px;
  }
</style>
