<template>
  <section class="storeManagement">
    <ai-list isTabs>
      <template slot="content">
        <ai-search-bar bottomBorder>
          <template slot="left">
            <el-button
              :disabled="!isLevel5"
              type="primary"
              icon="iconfont iconAdd"
              @click="onAdd">
              添加
            </el-button>
          </template>
        </ai-search-bar>
        <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="total"
          ref="aitableex"
          :current.sync="search.current"
          :size.sync="search.size"
          @getList="getList">
          <el-table-column
            slot="changeIntegral"
            label="积分"
            align="center">
            <template slot-scope="{ row }">
              <span>{{ row.doType > 0 ? "+" : ""}}{{ row.changeIntegral }}</span>
            </template>
          </el-table-column>
          <el-table-column slot="options" label="操作" align="center" width="120" fixed="right">
            <template slot-scope="{ row }">
              <div class="table-options">
                <el-button
                  type="text"
                  title="编辑"
                  style="margin-right: 8px;"
                  :disabled="!$permissions('app_appvillagerintegralshop_edit')"
                  @click="editItem(row)">
                  编辑
                </el-button>
                <ai-wechat-selecter :instance="instance" v-model="dialogInfo.operators" @change="getSelect">
                  <el-button
                    type="text"
                    @click="statusChage(row)"
                    title="授权"
                    v-if="$permissions('app_appvillagerintegralshop_edit')">
                    授权
                  </el-button>
                </ai-wechat-selecter>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      :customFooter="true"
      :destroyOnClose="true"
      @close="init('ruleForm')"
      width="520px"
    >
      <div class="form_div">
        <el-form
          ref="ruleForm"
          :model="dialogInfo"
          :rules="formRules"
          size="small"
          label-suffix="："
          label-width="100px"
        >
          <el-form-item label="店铺名称" prop="shopName">
            <el-input
              placeholder="请输入…"
              v-model="dialogInfo.shopName"
            ></el-input>
          </el-form-item>
          <el-form-item label="店主" prop="shopkeeper">
            <el-input
              placeholder="请输入…"
              v-model="dialogInfo.shopkeeper"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input
              placeholder="请输入…"
              v-model="dialogInfo.phone"
              maxlength="11"
            ></el-input>
          </el-form-item>
          <el-form-item label="店铺地址" prop="shopAddress">
            <el-input
              placeholder="请输入…"
              v-model="dialogInfo.shopAddress"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="dialogInfo.status">
              <el-radio label="1">启用</el-radio>
              <el-radio label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialog.visible = false" size="medium"
          >取消</el-button
        >
        <el-button @click="onConfirm('ruleForm')" type="primary" size="medium"
          >确认</el-button
        >
      </div>
    </ai-dialog>

    <ai-dialog
      title="操作人授权"
      :visible.sync="dialog.visibleStatus"
      :customFooter="true"
      :destroyOnClose="true"
      @close="init('ruleStatus')"
      width="720px"
    >
      <div class="form_div">
        <el-form
          ref="ruleStatus"
          :model="dialogInfo"
          :rules="formRules"
          size="small"
          label-suffix="："
          label-width="100px"
        >
          <el-form-item label="事件区域" prop="areaId">
            <ai-area-select
              clearable
              always-show
              :instance="instance"
              v-model="dialogInfo.areaId"
              :hide-level="2"
              :disabled-level="user.info.areaList.length"
            />
          </el-form-item>
          <el-form-item label="操作员" required>
            <el-col :span="14" style="width: 60%; margin-right: 8px">
              <el-form-item prop="operators">
                <div class="organ">
                  <span v-if="dialogInfo.operators.length">
                    <span
                      v-for="(item, i) in dialogInfo.operators"
                      :key="i"
                      class="organzation"
                      >{{ item.userName }}
                      <span
                        class="iconfont iconOverrule"
                        @click.stop="delate(i)"
                      ></span>
                    </span>
                  </span>
                  <span v-else style="color: #999">请选择</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="7" style="width: 30%">
              <ai-person-select
                :instance="instance"
                :url="peopleAjaxUrl"
                :isMultiple="true"
                v-if="$permissions('app_appvillagerintegralshopoperator_edit')"
                @selectPerson="getSelect"
                :chooseUserList="dialogInfo.operators"
              >
                <template name="option" v-slot:option="{ item }">
                  <span class="iconfont iconProlife">{{ item.userName }}</span>
                </template>
              </ai-person-select>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialog.visibleStatus = false" size="medium"
          >取消</el-button
        >
        <el-button @click="onConfirm('ruleStatus')" type="primary" size="medium"
          >确认</el-button
        >
      </div>
    </ai-dialog>
  </section>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "storeManagement",

  props: {
    instance: Function,
    dict: Object,
    areaId: String,
  },

  data() {
    return {
      searchDotime: [],
      search: {
        current: 1,
        size: 10,
      },
      unitId: "",
      total: 10,
      colConfigs: [
        { prop: "shopName", label: "店铺名称", align: "left" },
        {
          prop: "shopkeeper",
          label: "店主",
          align: "center",
        },
        {
          prop: "phone",
          label: "联系电话",
          align: "center",
        },
        {
          prop: "shopAddress",
          label: "店铺地址",
          align: "left",
          width: 280,
        },
        {
          prop: "names",
          label: "店铺操作员",
          align: "left",
        },
        {
          prop: "status",
          label: "状态",
          align: "center",
          render: (h, params) => {
            return h(
              "span",
              {
                class: "status-" + params.row.status,
              },
              this.$dict.getLabel("assessmentStartStatus", params.row.status)
            );
          },
        },
        { slot: "options", label: "操作", align: "center" },
      ],
      tableData: [],
      dialog: {
        title: "",
        visible: false,
        visibleStatus: false,
      },
      dialogInfo: {
        shopName: "",
        shopkeeper: "",
        phone: "",
        shopAddress: "",
        status: "1",
        areaId: "",
        operators: [],
      },
      formRules: {
        shopName: [
          { required: true, message: "请输入店铺名称", trigger: "change" },
        ],
        shopkeeper: [
          { required: true, message: "请输入店主", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        shopAddress: [
          { required: true, message: "请输入店铺地址", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
        areaId: [
          { required: true, message: "请选择事件区域", trigger: "blur" },
        ],
        operators: [
          { required: true, message: "请选择操作员", trigger: "blur" },
        ],
      },
      peopleAjaxUrl: "/admin/user/page",
      isLevel5: false,
    };
  },

  computed: {
    ...mapState(["user"]),
  },

  mounted() {
    this.unitId = this.user.info.unitId;

    this.$dict.load(["assessmentStartStatus"]).then(() => {
      this.getList();
    });
  },

  methods: {
    getList() {
      this.isLevel5 = this.areaId.substring(this.areaId.length - 3) != "000";
      this.instance
        .post(`/app/appvillagerintegralshop/list`, null, {
          params: {
            ...this.search,
            areaId: this.areaId,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        });
    },

    timeChange() {
      if (this.searchDotime) {
        this.search.doTimeStart = this.searchDotime[0];
        this.search.doTimeEnd = this.searchDotime[1];
      } else {
        this.search.doTimeStart = null;
        this.search.doTimeEnd = null;
      }
      this.search.current = 1;
      this.getList();
    },

    editItem(row) {
      this.dialogInfo = { ...row };
      this.dialog.visible = true;
    },

    statusChage(row) {
      this.dialogInfo = { ...row };
      if (this.dialogInfo.operators.length) {
        this.dialogInfo.operators.map((item) => {
          item.userName = item.name;
        });
      } else {
        this.dialogInfo.operators = [];
      }
    },

    onReset() {
      this.search.current = 1;
      this.getList();
    },

    onConfirm(formName) {
      if (this.dialogInfo.operators.length) {
        this.dialogInfo.operators.map((item) => {
          if (!item.name) {
            item.name = item.userName;
          }
        });
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.instance
            .post(`/app/appvillagerintegralshop/addOrUpdate`, this.dialogInfo)
            .then((res) => {
              if (res.code == 0) {
                this.onReset();
                this.onCancel();
              }
            });
        } else {
          return false;
        }
      });
    },

    onCancel() {
      this.dialog.visible = false;
      this.dialog.visibleStatus = false;
    },

    init(formName) {
      this.$refs[formName].clearValidate();
      Object.keys(this.dialogInfo).forEach((e) => {
        this.dialogInfo[e] = "";
      });
      this.dialogInfo.status = "1";
      this.dialogInfo.operators = [];
    },

    getSelect(e) {
      this.dialogInfo.operators = e;
      this.dialogInfo.operators.map((item) => {
        if (!item.name) {
          item.name = item.userName;
        }
      });
      this.instance
        .post(`/app/appvillagerintegralshop/addOrUpdate`, this.dialogInfo)
        .then((res) => {
          this.dialogInfo.operators = []
          if (res.code == 0) {
            this.onReset();
          }
        }).catch(() => {
          this.dialogInfo.operators = []
        })
    },

    delate(index) {
      this.dialogInfo.operators.splice(index, 1);
    },

    onAdd() {
      Object.keys(this.dialogInfo).forEach((e) => {
        this.dialogInfo[e] = "";
      });
      this.dialogInfo.status = "1";
      this.dialogInfo.operators = [];
      this.dialog.visible = true;
      this.dialogInfo.areaId = this.areaId;
    },
  },
};
</script>

<style lang="scss">
.storeManagement {
  height: 100%;
  overflow: auto;
  background: #f3f6f9;
  .status-0 {
    color: #ff4466;
  }

  .table-options {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .status-1 {
    color: #2ea222;
  }

  .status-2 {
    color: #999999;
  }

  .ai-dialog__content--wrapper {
    overflow-x: hidden;
  }

  .organ {
    width: auto;
    height: auto;
    padding: 0px 10px;
    line-height: 32px;
    border: 1px solid #d0d4dc;
    border-radius: 5px;
    cursor: pointer;
    box-sizing: border-box;
    color: #666;

    .organzation {
      background-color: #eee;
      margin-right: 4px;
      padding: 4px;
    }
  }
}
</style>
