<template>
  <div class="padding-20">
    <div class="search-box">
      <el-form ref="form"
               :inline="true"
               :model="searchForm"
               clearable
               label-width="100px"
               class="mt-10">
        <el-form-item label="创建时间:">
          <el-date-picker
            :editable="false"
            v-model="time"
            @change="timearr => {timearr ? (searchForm.start_time = timearr[0] + ' 00:00:00', searchForm.end_time = timearr[1] + ' 23:59:59') : searchForm.start_time = searchForm.end_time = undefined}"
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="部门名称:">
          <el-input v-model="searchForm.department_name" placeholder="请输入部门名称" clearable></el-input>
        </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"
                     @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.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 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="8" 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="2" 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="8" 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="2" 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="6" 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="6" class="table-cell">{{ item.attach_name }}</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="160"></el-table-column>
      <el-table-column label="商品名称" prop="product_name"></el-table-column>
      <el-table-column label="商品分类" prop="category_name"></el-table-column>
      <!--TODO 价格区间-->
      <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="是否上架" width="100">
        <template slot-scope="scope">
          <p>{{ ['下架', '上架'][scope.row.product_status] }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" @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="categoryData"
            :goodsAttrData="goodsAttrData"
            @success="init"></detail>
  </div>
</template>

<script>
import page from '@/mixin/page'
import detail from './details'

export default {
  mixins: [page],
  components: {
    detail,
  },
  data () {
    return {
      detailsDialog: {
        show: false,
        exData: {}
      },
      time: [],
      searchForm: {},
      tableData: [],
      tableUrl: '/v1/bar/product/list',
      categoryData: [],
      goodsAttrData: []
    }
  },
  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()
        }
      }).catch(() => {})
    },
    // todo 优化，放在全局 获取商品分类列表
    async fetchCategory () {
      const api = '/v1/bar/product/category/list'
      const { code, data } = await this.$fetch(api, {
        page: 1,
        page_size: 10000
      }, 'get')
      if (this.tableData && (data.data || data.list) && code === 200) {
        this.categoryData = data.data || data.list
      }
    },
    // todo 优化，放在全局 获取规格列表
    async fetchGoodsAttr () {
      const api = '/v1/bar/product/attach/list'
      const { code, data } = await this.$fetch(api, {
        page: 1,
        page_size: 10000
      }, 'get')
      if (this.tableData && (data.data || data.list) && code === 200) {
        this.goodsAttrData = data.data || data.list
      }
    }
  },
  mounted () {
    this.init()
    this.fetchCategory()
    this.fetchGoodsAttr()
  },
}
</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: hidden;
}

.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>