<template>
  <div class="main">
    <div class="title">全部门店（ 共5个 ）</div>
    <div class="searchs">
      <div class="buttons">
        <el-button class="button buttonlight" size="small" @click="addStore">添加门店</el-button>
        <el-button class="button buttondark" size="small">批量删除</el-button>
      </div>

      <!-- 搜索区 -->
      <el-form class="searchzone" :inline="true" :model="data.search" label-width="auto">
        <el-form-item label="关键词">
          <el-input
            size="small"
            v-model="data.search.keys"
            style="width:160px"
            placeholder="请输入关键词"
          />
        </el-form-item>
        <el-button class="button buttondark" size="small" style="margin-top:4px;">搜索</el-button>
      </el-form>
    </div>
    <div class="lists">
      <el-table
        stripe
        class="list"
        ref="multipleTable"
        :data="list.main"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="listPick"
        height="calc(100vh - 360px)"
      >
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column prop="name" label="门店名称" align="center"></el-table-column>
        <el-table-column prop="type" label="门店类型" align="center" width="120"></el-table-column>
        <el-table-column prop="principal" label="门店负责人" align="center" width="120"></el-table-column>
        <el-table-column prop="shopId" label="所属柜组" align="center" width="120"></el-table-column>
        <el-table-column prop="location" label="位置" align="center" width="120"></el-table-column>
        <el-table-column prop="signNum" label="门牌号" align="center" width="120"></el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="storeGetStoreDetail(scope.row.id)" class="btn">详情</el-button>
            <el-button type="text" @click="testButtonClick(scope.row.id)" class="btn">编辑</el-button>
            <el-button type="text" @click="storeDelStore(scope.row.id)" class="listButtonRed">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pages">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-size="page.size"
        layout="total, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </div>

    <add-store ref="addStore"></add-store>
    <store-detail ref="storeDetail"></store-detail>

    <div class="ztask-dialogs">
      <el-dialog
        title="门店详情"
        :visible.sync="zcache.status.seeDialog"
        width="50%"
        :before-close="dialogSeeClose"
      >
        <div class="dialogMain">
          <el-form :model="zdata.see" label-width="120px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="门店名称：">
                  <el-input
                    :disabled="true"
                    v-model="zdata.see.storeName"
                    autocomplete="off"
                    placeholder="门店名称缺失"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="门店类型：">
                  <el-input
                    :disabled="true"
                    v-model="zdata.see.storeType"
                    autocomplete="off"
                    placeholder="门店类型为空"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="所属柜组：">
                  <el-input
                    :disabled="true"
                    v-model="zdata.see.storeFromBar"
                    autocomplete="off"
                    placeholder="柜组信息未知"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="门店负责人：">
                  <el-input
                    :disabled="true"
                    v-model="zdata.see.storeBossName"
                    autocomplete="off"
                    placeholder="门店负责人未知"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="门牌号：">
                  <el-input
                    :disabled="true"
                    v-model="zdata.see.storeDoorId"
                    autocomplete="off"
                    placeholder="门牌号未知"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="位置：">
                  <el-input
                    :disabled="true"
                    v-model="zdata.see.storeAddress"
                    autocomplete="off"
                    placeholder="位置未知"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="店员：">
                  <el-table class="list" :data="zdata.see.storeManList" tooltip-effect="dark">
                    <el-table-column type="index" width="50"  align="center"></el-table-column>
                    <el-table-column prop="userName" label="门店名称" align="center"></el-table-column>
                    <el-table-column prop="userId" label="门店类型" align="center"></el-table-column>
                    <el-table-column prop="mobile" label="门店类型" align="center"></el-table-column>
                  </el-table>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogSeeClose">关 闭</el-button>
          <!-- <el-button size="small" type="primary" @click="dialogSeeSubmitSend('seeForm')">任务下发</el-button> -->
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import AddStore from "./components/addStore";
import StoreDetail from "./components/storeDetail";
import {
  ApiStoreGetMainList,
  ApiStoreGetStoreDetail,
  ApiStoreDelStore
} from "@api/in/store";
import axios from "axios";
const zlog = console.log.bind(console);

export default {
  components: {
    AddStore,
    StoreDetail
  },
  data() {
    return {
      zcache: {
        status: {
          seeDialog: false
        }
      },
      zdata: {
        see: {
          storeName: "storeName",
          storeType: "storeType",
          storeFromBar: "storeFromBar",
          storeBossName: "storeBossName",
          storeDoorId: "storeDoorId",
          storeAddress: "storeAddress",
          storeManList: [
            {
              userName: "Alice",
              userId: "wx0001",
              mobile: "110"
            },
            {
              userName: "Bob",
              userId: "wx0002",
              mobile: "120"
            }
          ]
        }
      },
      page: {
        currentPage: 1,
        size: 20,
        total: 100
      },
      list: {
        testMain: [
          {
            id: "1001",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1002",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1003",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1003",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1003",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1003",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1003",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          }
        ],
        main: [],
        man: [],
        search: {
          bar: [
            {
              id: "1",
              name: "全部"
            },
            {
              id: "2",
              name: "测试"
            }
          ],
          taskType: [
            {
              id: "1",
              name: "全部"
            },
            {
              id: "2",
              name: "测试"
            }
          ]
        }
      },
      tableHeight: window.innerHeight * 0.5,
      data: {
        search: {
          bar: "",
          taskType: "",
          date: "",
          keys: ""
        },
        page: {
          nowPageNum: 4
        }
      },
      msgId: "",
      detailDialog: false
    };
  },
  watch: {
    // addStoreDialog() {
    addStoreDialog() {
      if ((this.$refs.addStore.addStoreDialog = false)) {
        this.storeGetMainList();
      }
    }
  },
  // created() {
  //   this.storeGetMainList();
  //   zlog('--->Created!')
  // },
  mounted() {
    this.storeGetMainList();
  },
  methods: {
    matchManIdAndManName(inId) {
      let manList = this.list.man;
      let manName = "未知";

      for (let i = 0; i < this.list.man.length; i++) {
        let item = manList[i];
        if (item.id == inId) {
          manName = item.userName;
        }
      }
      return manName;
    },

    transManIdToManName() {
      let mainList = this.list.main;
      let id = "";
      let name = "";

      for (let i = 0; i < mainList.length; i++) {
        id = this.list.main[i].principal;
        name = this.matchManIdAndManName(id);
        this.list.main[i].principal = name;
      }
    },

    storeGetMainList() {
      // zlog("--->In Get API!");
      let postData = {
        pageNum: 1
      };

      ApiStoreGetMainList(postData).then(res => {
        this.list.main = res.data.pageInfo_adminStalls.list[0];
        this.list.man = res.data.pageInfo_principals.list[0];
        this.transManIdToManName();
      });
    },
    storeGetStoreDetail(inData) {
      let postData = {
        isDetail: true,
        stallId: inData
      };

      ApiStoreGetStoreDetail(postData)
        .then(res => {
          this.zdata.see.storeName = res.data.adminStall.name;
          this.zdata.see.storeType = res.data.adminStall.type;
          this.zdata.see.storeFromBar = res.data.adminStall.shopId;
          this.zdata.see.storeBossName = res.data.principal.userName;
          this.zdata.see.storeDoorId = res.data.adminStall.signNum;
          this.zdata.see.storeAddress = res.data.adminStall.location;
          this.zdata.see.storeManList = res.data.clerks_unselected
        })
        .catch(err => {});

      this.zcache.status.seeDialog = true;

      // let postData = {
      //   isDetail: true,
      //   stallId: inData
      // };

      // this.msgId = id;
      // this.detailDialog = true;
      // this.$refs.storeDetail.detailDialog = true;

      // ApiStoreGetStoreDetail(postData).then(res => {
      // });
    },
    storeDelStore(inData) {
      let postData = {
        stallId: 123456
      };

      ApiStoreDelStore(inData)
        .then(res => {
          console.log("--->delRes =", res);
          if (res.result == "success") {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.storeGetMainList();
          } else {
            this.$message({
              message: "删除失败！",
              type: "error"
            });
          }
        })
        .catch(err => {
          this.$message({
            message: "删除失败！",
            type: "error"
          });
        });
    },

    listPick() {},
    testButtonClick() {},
    pagesSizeChange() {},
    pagesNowPageChange() {},
    setListsHeadStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
      } else {
        return "";
      }
    },
    addStore() {
      this.$refs.addStore.addStoreDialog = true;
    },
    handleDetail() {
      this.$refs.storeDetail.detailDialog = true;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    dialogSeeClose() {
      this.zcache.status.seeDialog = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.btn {
  font-size: 14px;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
}
.main {
  position: relative;
  background-color: #fff;
  box-sizing: border-box;
  height: 100%;
  padding: 0px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  box-shadow: 0px 2px 4px 0px #ddd;
}

.buttons {
  width: 266px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.buttonlight {
  background-color: #e8e9fe;
  color: #4e59c7;
  border: 1px solid #4e59c7;
  box-sizing: border-box;
}
.buttondark {
  width: 88px;
  height: 32px;
  background-color: #4e59c7;
  color: #ffffff;
  border: 1px solid #4e59c7;
  box-sizing: border-box;
}
.searchzone {
  height: 40px;
  width: auto;
  min-width: 654px;
  text-align: right;
}
.lists {
  height: auto;
  min-height: 70%;
  width: 100%;
  margin-top: 20px;
}
.listButtonRed {
  color: #d0021b;
  font-weight: bold;
}
.pages {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.title {
  height: 48px;
  line-height: 48px;
  color: rgba(56, 56, 56, 1);
  border-bottom: 1px solid #f8f8f8;
  margin-bottom: 16px;
}
</style>