<template>
  <div class="padding-20">
    <div class="search-box">
      <el-form ref="form"
               :inline="true"
               :model="searchForm"
               clearable
               class="mt-10">
        <el-form-item label="商品名称:">
          <el-input v-model="searchForm.product_name" placeholder="请输入商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品分类名称:">
          <el-select
            v-model="searchForm.category_id"
            filterable
            clearable
            placeholder="请选择">
            <el-option
              v-for="item in categoryArr"
              :key="item.id"
              :label="item.category_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否上架:">
          <el-select clearable v-model="searchForm.product_status">
            <el-option label="上架" :value="1"></el-option>
            <el-option label="下架" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="ml-10">
          <el-button icon="el-icon-search" type="primary" @click="searchSubmit">查询</el-button>
        </el-form-item>
        <el-form-item class="ml-10">
          <el-button icon="el-icon-plus"
                     type="primary"
                     v-permission="'business_pms_goods_add'"
                     @click="add">新增
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData"
              v-loading="tableLoading"
              fit
              class="marginT-10 order-table"
              :max-height="vheight">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left"
                   inline
                   class="demo-table-expand"
                   label-width="160px">
            <el-form-item label="ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="商品名称">
              <span>{{ props.row.product_name }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category_name }}</span>
            </el-form-item>
            <el-form-item label="价格（元）">
              <span>{{ props.row.product_price | fen2Yuan }}</span>
            </el-form-item>
            <el-form-item label="出单位置">
              <span>{{ ['', '厨房', '柜台'][props.row.product_place] }}</span>
            </el-form-item>
            <el-form-item label="是否售罄">
              <span>{{ ['否', '是'][props.row.is_sell_out] }}</span>
            </el-form-item>
            <el-form-item label="存酒">
              <span>{{ ['不支持', '支持'][props.row.product_is_storage] }}</span>
            </el-form-item>
            <el-form-item label="是否上架">
              <span>{{ ['下架', '上架'][props.row.product_status] }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <div v-html="props.row.product_desc"></div>
            </el-form-item>
            <el-form-item label="商品图片">
              <el-image style="width: 100px; height: 100px"
                        :src="props.row.product_img_url"
                        :preview-src-list="[props.row.product_img_url]">
              </el-image>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.created_at }}</span>
            </el-form-item>
            <el-form-item label="更新时间">
              <span>{{ props.row.updated_at }}</span>
            </el-form-item>
            <el-form-item></el-form-item>
            <el-form-item label="SKU"></el-form-item>
            <div class="table-layout">
              <el-row>
                <el-col :span="2" class="table-cell-title">ID</el-col>
                <el-col :span="7" class="table-cell-title">SKU名</el-col>
                <el-col :span="2" class="table-cell-title">库存</el-col>
                <el-col :span="2" class="table-cell-title">价格</el-col>
                <el-col :span="3" class="table-cell-title">是否上架</el-col>
                <el-col :span="4" class="table-cell-title">创建时间</el-col>
                <el-col :span="4" class="table-cell-title">更新时间</el-col>
              </el-row>
              <el-row v-for="(item, index) in props.row.skus"
                      :key="index">
                <el-col :span="2" class="table-cell">{{ item.id }}</el-col>
                <el-col :span="7" class="table-cell">{{ item.product_sku }}</el-col>
                <el-col :span="2" class="table-cell">{{ item.product_stock }}</el-col>
                <el-col :span="2" class="table-cell">{{ item.product_price | fen2Yuan }}</el-col>
                <el-col :span="3" class="table-cell">{{ ['下架', '上架'][item.product_status] }}</el-col>
                <el-col :span="4" class="table-cell">{{ item.created_at }}</el-col>
                <el-col :span="4" class="table-cell">{{ item.updated_at }}</el-col>
              </el-row>
            </div>
            <el-form-item label="规格"></el-form-item>
            <div class="table-layout">
              <el-row>
                <el-col :span="2" class="table-cell-title">ID</el-col>
                <el-col :span="3" class="table-cell-title">附加名</el-col>
                <el-col :span="3" class="table-cell-title">最多可选数量</el-col>
                <el-col :span="8" class="table-cell-title">明细</el-col>
                <el-col :span="4" class="table-cell-title">创建时间</el-col>
                <el-col :span="4" class="table-cell-title">更新时间</el-col>
              </el-row>
              <el-row v-for="(item, index) in props.row.attachs"
                      :key="index">
                <el-col :span="2" class="table-cell">{{ item.id }}</el-col>
                <el-col :span="3" class="table-cell">{{ item.attach_name }}</el-col>
                <el-col :span="3" class="table-cell">{{ item.attach_max_num }}</el-col>
                <el-col :span="8" class="table-cell">
                  <el-tag
                    class="af-el-tag"
                    type="info"
                    v-for="(tag, idx) in item.attach_content.split(',')"
                    :key="idx">{{ tag }}
                  </el-tag>
                </el-col>
                <el-col :span="4" class="table-cell">{{ item.created_at }}</el-col>
                <el-col :span="4" class="table-cell">{{ item.updated_at }}</el-col>
              </el-row>
            </div>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id" width="80"></el-table-column>
      <el-table-column label="商品名称" prop="product_name"></el-table-column>
      <el-table-column label="商品分类" prop="category_name"></el-table-column>
      <el-table-column label="价格（元）">
        <template slot-scope="scope">
          <p>{{ scope.row.product_price | fen2Yuan }}</p>
        </template>
      </el-table-column>
      <el-table-column label="出单位置">
        <template slot-scope="scope">
          <p>{{ ['', '厨房', '柜台'][scope.row.product_place] }}</p>
        </template>
      </el-table-column>
      <el-table-column label="存酒">
        <template slot-scope="scope">
          <p>{{ ['不支持', '支持'][scope.row.product_is_storage] }}</p>
        </template>
      </el-table-column>
      <el-table-column label="是否售罄">
        <template slot-scope="scope">
          <p>{{ ['供应中', '售罄'][scope.row.is_sell_out] }}</p>
        </template>
      </el-table-column>
      <el-table-column label="是否上架" width="100">
        <template slot-scope="scope">
          <p>{{ ['下架', '上架'][scope.row.product_status] }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <!--todo 设置按钮权限-->
          <el-button type="text" :disabled="booLock" @click="showStoragedialogForm(scope.row)">是否售罄</el-button>
          <el-button type="text" v-permission="'business_pms_goods_edit'" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" v-permission="'business_pms_goods_del'" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="marginT-20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :hide-on-single-page="true"
      :current-page="page"
      :page-size="page_size"
      :page-sizes="[10, 20, 100, 200, 300, 400]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"/>
    <detail v-if="detailsDialog.show"
            v-model="detailsDialog.show"
            :exData="detailsDialog.exData"
            :categoryData="categoryArr"
            :goodsAttrData="goodsAttrArr"
            @success="init"></detail>
    <el-dialog title="商品是否售罄确认"
               :visible.sync="storagedialogForm">
      <el-form :model="dialogForm"
               :rules="formRules"
               ref="dialogForm">
        <el-form-item
          label="是否售罄"
          prop="is_sell_out"
          :rules="formRules.required">
          <el-select
            v-model="dialogForm.is_sell_out"
            placeholder="请选择">
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="storagedialogForm = false">取 消</el-button>
        <el-button type="primary" @click="storageSet">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import page from '@/mixin/page'
import detail from './details'
import { mapGetters } from 'vuex'

export default {
  mixins: [page],
  components: {
    detail,
  },
  data () {
    return {
      detailsDialog: {
        show: false,
        exData: {}
      },
      searchForm: {},
      tableData: [],
      tableUrl: '/v1/bar/product/list',
      booLock: false,
      storagedialogForm: false,
      dialogForm: {
        // is_sell_out: '' // 0未售罄1已售罄
      }
    }
  },
  computed: {
    ...mapGetters([
      'categoryArr',
      'goodsAttrArr'
    ])
  },
  methods: {
    add () {
      this.detailsDialog.exData = {}
      this.detailsDialog.show = true
    },
    edit (row) {
      this.detailsDialog.exData = row
      this.detailsDialog.show = true
    },
    del (row) {
      this.$confirm('确定要删除吗', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await this.$fetch('/v1/bar/product/delete', { id: row.id }, 'get')
        if (data.code === 200) {
          this.$message.success('删除成功')
          this.init()
          this.$store.dispatch('common/fetchGoodsArr')
        }
      }).catch(() => {})
    },
    showStoragedialogForm (row) {
      this.storagedialogForm = true
      this.dialogForm = {}
      this.$nextTick(() => {
        this.$set(this.dialogForm, 'id', row.id)
        this.$set(this.dialogForm, 'is_sell_out', row.is_sell_out.toString())
      })
    },
    async storageSet () {
      this.$refs['dialogForm'].validate(async valid => {
        if (valid) {
          this.booLock = true
          const data = await this.$fetch('/v1/bar/product/updatezero', this.dialogForm, 'get')
          this.booLock = false
          if (data.code === 200) {
            this.$message.success('设置成功')
            this.storagedialogForm = false
            this.init()
            this.$store.dispatch('common/fetchGoodsArr')
          }
        } else {
          console.log('error submit!!')
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  .el-form-item {
    width: 50%;
    margin-right: 0;
    margin-bottom: 0;

    ::v-deep &__label {
      color: #99a9bf;
    }
  }
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow-y: scroll;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}

.af-el-tag {
  margin-right: 6px;
  margin-bottom: 6px;
}
</style>
