<!--入口列表-->
<template>
  <div class="app-container">
    <el-form :inline="true" :model="page.data">
      <el-form-item class="margin-left">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addOrUpdate()"
        >添加入口</el-button>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          v-model="page.data.entryName"
          placeholder="请输入入口名称"
          clearable
        />
      </el-form-item>
      <el-form-item class="margin-left input" style="width: 180px">
        <el-select
          v-model="page.data.sortType"
          clearable
          placeholder="请选择显示排序方式"
        >
          <el-option label="升序" value="asc" />
          <el-option label="降序" value="desc" />
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="fetchData"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 主体表格 -->
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      highlight-current-row
      class="table"
    >
      <el-table-column align="center" width="80" label="序号">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="productName"
        width="260"
        label="入口名称"
        show-overflow-tooltip
      />
      <el-table-column align="center" width="180" label="开放时间">
        <template v-slot="{ row }">
          {{ row.openStartTime }} ~ {{ row.openEndTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="预约时间段" width="400">
        <template v-slot="{ }">
          <el-tooltip class="item" effect="dark" placement="bottom">
            <div>
              <el-tag
                v-for="item in [
                  {
                    startTime:'08:00',
                    endTime:'10:00',
                    num: 1000,
                  },
                  {
                    startTime:'10:00',
                    endTime:'12:00',
                    num: 1000,
                  },
                  {
                    startTime:'08:00',
                    endTime:'10:00',
                    num: 1000,
                  },
                  {
                    startTime:'10:00',
                    endTime:'12:00',
                    num: 1000,
                  }
                ]"
                :key="item.key"
                type="primary"
              >
                {{ item.startTime }}-{{ item.endTime }}
              </el-tag>
            </div>
            <template #content>
              <div>
                <div
                  v-for="(item) in [
                    {
                      startTime:'08:00',
                      endTime:'10:00',
                      num: 1000,
                    },
                    {
                      startTime:'10:00',
                      endTime:'12:00',
                      num: 1000,
                    },
                    {
                      startTime:'08:00',
                      endTime:'10:00',
                      num: 1000,
                    },
                    {
                      startTime:'10:00',
                      endTime:'12:00',
                      num: 1000,
                    }
                  ]"
                  :key="item.key"
                  style="padding: 5px;"
                >
                  <span style="margin-right: 20px">{{ item.startTime }}-{{ item.endTime }}</span>
                  <span>人流峰值：{{ item.num }}</span>
                </div>
              </div>
            </template>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" width="180" label="显示序号（越小越靠上）">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="180"
        prop="createTime"
        label="创建时间"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="操作区" width="230">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="addOrUpdate(row)"
          >编辑</el-button>
          <el-button
            type="danger"
            size="small"
            @click="delShop(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!-- 添加/编辑入口 -->
    <UpdateModal ref="updateModel" @success="modalSuccess" />
  </div>
</template>
<script>
import QRCode from 'qrcode';
import Pagination from '@/components/Pagination';
import UpdateModal from './UpdateModal';
import {
  doGetShoplist
} from '@/api/shoplist';
export default {
  components: {
    Pagination,
    UpdateModal
  },
  data() {
    return {
      listLoading: false,
      submitLoading: false,
      isEdit: false, // 判断是否是编辑
      imgList: [],
      total: 0,
      // 分页参数
      page: {
        data: {
          entryName: '', // 入口名称
          sortType: '' // 显示排序方式
        },
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      // 标题
      dialogTitle: '',
      // 是否显示对话框
      inputValue: ''
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      doGetShoplist(this.page).then((res) => {
        this.tableData = JSON.parse(JSON.stringify(res)).data.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 添加编辑
    addOrUpdate(edit) {
      this.$nextTick(() => {
        if (edit) {
          // 修改
          console.log(edit, '编辑操作...');
          this.$refs.updateModel.open(Object.assign({}, {
            entryName: edit.productName, // 入口名称
            id: edit.id
          }));
          this.isEdit = true;
        } else {
          this.$refs.updateModel.open();
          // 添加
          this.isEdit = false;
        }
      });
    },
    // 删除订单
    delShop(id) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        /* doDeleteShop(id).then((res) => {
          this.fetchData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }); */
      });
    },
    qrcode() {
      // 二维码的各种配置
      const opts = {
        errorCorrectionLevel: 'H',
        type: 'image/jpeg',
        quality: 0.3,
        margin: 1,
        width: 300,
        height: 300,
        color: {
          light: '#fff'
        }
      };
      // 二维码需要展示的内容，写什么二维码 就是什么
      const text =
        'https://noise.hz-hanghui.com:8088/hanghui-warehouse/entrance';
      QRCode.toDataURL(text, opts)
        .then((url) => {
          // console.log(url);
          // url 就是返回的路径
          this.imgList = [url];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    clearPageParams() {
      this.page = {
        data: {
          entryName: '', // 入口名称
          sortType: '' // 显示排序方式
        },
        pageNum: 1,
        pageSize: 10
      };
    },
    modalSuccess(isEdit) {
      if (!isEdit) {
        this.clearPageParams();
      }
      this.fetchData();
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    }
  }
};
</script>

<style >
.tag-card .card-center {
  padding: 8px 0 !important;
}
</style>
<style lang="scss" scoped>
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 150px;
}

/* 动态编辑标签 */
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  &:first-child {
    margin-left: 0;
  }
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
::v-deep .el-tag {
  margin-right: 0px;
}
::v-deep .aaa {
  .el-form-item__label:before {
    content: "" !important;
  }
}
.input-new-tag:first-child {
  margin-left: 0 !important;
}
.table {
  margin-top: 15px;
}
</style>
