<template>
  <div class="baseData">
    <el-form
      ref="ruleForm"
      v-loading="loading"
      :model="ruleForm"
      status-icon
      size="mini"
      :rules="rulesThis"
      label-width="95px"
      class="supplierAdd"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="最近装修" prop="renovation_date">
            <el-date-picker
              style="width: 100%"
              size="mini"
              type="month"
              value-format="yyyy-MM"
              placeholder="最近装修时间"
              v-model="ruleForm.renovation_date"
            /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="停车位数" prop="park_num">
            <el-input-number
              style="width: 100%"
              size="mini"
              :max="9999999"
              :min="0"
              step-strictly
              :step="1"
              controls-position="right"
              placeholder="停车位数"
              v-model="ruleForm.park_num"
          /></el-form-item>
        </el-col>
        <el-col span="7" class="tr">
          <el-button type="primary" @click="submitForm" :size="'mini'">保 存 </el-button>
        </el-col>
        <el-col :span="24">
          <el-form-item label="场地特色" prop="store_spec_ids" size="mini">
            <div class="clear-main">
              <div class="clear-left">
                <el-checkbox
                  :indeterminate="isIndeterminate.store_spec_ids"
                  v-model="checkAll.store_spec_ids"
                  style="margin: 0"
                  size="mini"
                  @change="
                    handleCheckAllChange($event, 'store_spec_ids', store_spec_ids_options)
                  "
                  >全选</el-checkbox
                >
              </div>
              <div class="clear-right">
                <el-checkbox-group
                  v-model="ruleForm.store_spec_ids"
                  size="mini"
                  style="margin: 0"
                  @change="
                    handleCheckedCitiesChange(
                      $event,
                      'store_spec_ids',
                      store_spec_ids_options
                    )
                  "
                >
                  <el-row>
                    <el-col
                      :span="3"
                      v-for="(item, index) in store_spec_ids_options"
                      :key="item + index"
                    >
                      <el-checkbox style="margin: 0" size="mini" :label="item.id + ''">{{
                        item.name
                      }}</el-checkbox>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="酒店设施" prop="hotel_spec_tags" size="mini">
            <div class="clear-main">
              <div class="clear-left">
                <el-checkbox
                  :indeterminate="isIndeterminate.hotel_spec_tags"
                  v-model="checkAll.hotel_spec_tags"
                  size="mini"
                  style="margin: 0"
                  @change="
                    handleCheckAllChange($event, 'hotel_spec_tags', hotel_spec_tags_options)
                  "
                  >全选</el-checkbox
                >
              </div>
              <div class="clear-right">
                <el-checkbox-group
                  v-model="ruleForm.hotel_spec_tags"
                  size="mini"
                  style="margin: 0"
                  @change="
                    handleCheckedCitiesChange(
                      $event,
                      'hotel_spec_tags',
                      hotel_spec_tags_options
                    )
                  "
                >
                  <el-row>
                    <el-col :span="3"></el-col>
                    <el-col
                      :span="3"
                      v-for="(item, index) in hotel_spec_tags_options"
                      :key="item + index"
                    >
                      <el-checkbox style="margin: 0" size="mini" :label="item + ''">{{
                        item
                      }}</el-checkbox>
                    </el-col>
                    <el-col :span="3">
                      <el-button
                        size="mini"
                        type="text"
                        @click="openModal('hotel_spec_tags', '酒店设施', hotel_spec_tags_options)"
                        >添加</el-button
                      >
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="会议设施" prop="conference_spec_tags" size="mini">
            <div class="clear-main">
              <div class="clear-left">
                <el-checkbox
                  :indeterminate="isIndeterminate.conference_spec_tags"
                  v-model="checkAll.conference_spec_tags"
                  style="margin: 0"
                  size="mini"
                  @change="
                    handleCheckAllChange(
                      $event,
                      'conference_spec_tags',
                      conference_spec_tags_options
                    )
                  "
                  >全选</el-checkbox
                >
              </div>
              <div class="clear-right">
                <el-checkbox-group
                  v-model="ruleForm.conference_spec_tags"
                  size="mini"
                  style="margin: 0"
                  @change="
                    handleCheckedCitiesChange(
                      $event,
                      'conference_spec_tags',
                      conference_spec_tags_options
                    )
                  "
                >
                  <el-row>
                    <el-col
                      :span="3"
                      v-for="(item, index) in conference_spec_tags_options"
                      :key="item + index"
                    >
                      <el-checkbox style="margin: 0" size="mini" :label="item + ''">{{
                        item
                      }}</el-checkbox>
                    </el-col>
                    <el-col :span="3">
                      <el-button
                        size="mini"
                        type="text"
                        @click="openModal('conference_spec_tags', '会议设施', conference_spec_tags_options)"
                        >添加</el-button
                      >
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="客房设施" prop="room_spec_tags" size="mini">
            <div class="clear-main">
              <div class="clear-left">
                <el-checkbox
                  :indeterminate="isIndeterminate.room_spec_tags"
                  v-model="checkAll.room_spec_tags"
                  size="mini"
                  style="margin: 0"
                  @change="
                    handleCheckAllChange($event, 'room_spec_tags', room_spec_tags_options)
                  "
                  >全选</el-checkbox
                >
              </div>
              <div class="clear-right">
                <el-checkbox-group
                  v-model="ruleForm.room_spec_tags"
                  size="mini"
                  style="margin: 0"
                  @change="
                    handleCheckedCitiesChange(
                      $event,
                      'room_spec_tags',
                      room_spec_tags_options
                    )
                  "
                >
                  <el-row>
                    <el-col
                      :span="3"
                      v-for="(item, index) in room_spec_tags_options"
                      :key="item + index"
                    >
                      <el-checkbox style="margin: 0" size="mini" :label="item + ''">{{
                        item
                      }}</el-checkbox>
                    </el-col>
                    <el-col :span="3">
                      <el-button
                      size="mini"
                        type="text"
                        @click="openModal('room_spec_tags', '客房设施', room_spec_tags_options)"
                        >添加</el-button
                      >
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="餐饮设施" prop="caterer_spec_tags" size="mini">
            <div class="clear-main">
              <div class="clear-left">
                <el-checkbox
                  :indeterminate="isIndeterminate.caterer_spec_tags"
                  v-model="checkAll.caterer_spec_tags"
                  style="margin: 0"
                  size="mini"
                  @change="
                    handleCheckAllChange(
                      $event,
                      'caterer_spec_tags',
                      caterer_spec_tags_options
                    )
                  "
                  >全选</el-checkbox
                >
              </div>
              <div class="clear-right">
                <el-checkbox-group
                  v-model="ruleForm.caterer_spec_tags"
                  size="mini"
                  style="margin: 0"
                  @change="
                    handleCheckedCitiesChange(
                      $event,
                      'caterer_spec_tags',
                      caterer_spec_tags_options
                    )
                  "
                >
                  <el-row>
                    <el-col
                      :span="3"
                      v-for="(item, index) in caterer_spec_tags_options"
                      :key="item + index"
                    >
                      <el-checkbox style="margin: 0" size="mini" :label="item + ''">{{
                        item
                      }}</el-checkbox>
                    </el-col>
                    <el-col :span="3">
                      <el-button
                      size="mini"
                        type="text"
                        @click="openModal('caterer_spec_tags', '餐饮设施', caterer_spec_tags_options)"
                        >添加</el-button
                      >
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </div>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="店铺简介" prop="store_desc">
            <el-input
              type="textarea"
              placeholder="店铺简介"
              size="mini"
              :autosize="{ minRows: 12, maxRows: 12 }"
              v-model="ruleForm.store_desc"
              show-word-limit
              maxlength="5000"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <add-edit
      :valKey="modalKey"
      :option="keyOptions"
      :show-model="showModel"
      :title="modalTitle"
      @refresh="refresh"
      @cancel="showModel = false"
    />
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/operate/shopTrim";
import asyncRequestStyle from "@/apis/service/serviceParam/storeStyle";
import resToken from "@/mixins/resToken";
import DynamicTags from "@/components/dynamic-tags";
import { formItem, rules, config, checkAll, isIndeterminate } from "./columns";
import addEdit from "./addEdit";
export default {
  name: "SupplierAdd",
  mixins: [resToken],
  components: {
    DynamicTags,
    addEdit,
  },
  props: ["sitem", "store_id"],
  watch: {
    store_id: function (val) {
      this.initForm();
    },
  },
  data() {
    return {
      checkAll: { ...checkAll },
      isIndeterminate: {
        ...isIndeterminate,
      },
      store_spec_ids_options: [],
      caterer_spec_tags_options: config["caterer_spec_tags"],
      hotel_spec_tags_options: config["hotel_spec_tags"],
      room_spec_tags_options: config["room_spec_tags"],
      conference_spec_tags_options: config["conference_spec_tags"],
      loading: false,
      showModel: false,
      hand_name: "",
      rules,
      modalKey: "",
      modalTitle: "",
      keyOptions: [],
      ruleForm: { ...formItem },
      rulesThis: {},
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.hand_name = "";
      this.loading = true;
      this.store_spec_ids_options = [];

      await this.resetFormData();
      await this.searchTypeList();
      this.rulesThis = this.rules;
      this.loading = false;
    },

    async resetFormData() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          if (this.sitem && this.sitem.id) {
            const {
              // id,
              renovation_date,
              park_num,
              store_spec_ids,
              caterer_spec_tags,
              hotel_spec_tags,
              room_spec_tags,
              conference_spec_tags,
              store_desc,
            } = this.sitem || {};
            this.hand_name = person || "";
            this.ruleForm = {
              // id: id || "",
              renovation_date: renovation_date || "",
              park_num: park_num || 0,
              store_spec_ids: store_spec_ids || [],
              caterer_spec_tags: caterer_spec_tags || [],
              hotel_spec_tags: hotel_spec_tags || [],
              room_spec_tags: room_spec_tags || [],
              conference_spec_tags: conference_spec_tags || [],
              store_desc: store_desc || "",
            };
          }
        }
      });
    },
    openModal(key, title, option) {
      console.log(key);
      this.modalKey = key;
      this.modalTitle = title;
      this.keyOptions = option;
      this.showModel = true;
    },
    refresh(e) {
      const { valKey, name } = e;
      this[valKey + "_options"].push(name);
      this.ruleForm[valKey].push(name);
      this.$refs.ruleForm.validateField(valKey);
    },
    handleCheckAllChange(val, key, arr) {
      console.log(val);
      let list = [];
      if (key === "store_spec_ids") {
        arr.forEach((item) => {
          list.push(item.id + "");
        });
      } else {
        list = arr;
      }
      this.ruleForm[key] = val ? list : [];
      console.log(this.ruleForm[key]);
      this.isIndeterminate[key] = false;
    },
    handleCheckedCitiesChange(value, key, list) {
      let checkedCount = value.length;
      this.checkAll[key] = checkedCount === list.length;
      this.isIndeterminate[key] = checkedCount > 0 && checkedCount < list.length;
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          let model = JSON.parse(JSON.stringify(this.ruleForm));
          model.store_id = this.store_id;
          let res = await asyncRequest.update(model);

          this.loading = false;
          if (res && res.code === 1) {
            const title = "装修成功!";
            this.$notify.success({
              title,
              message: "",
            });
            // 刷新
            // this.$emit("refresh", res.data);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 刷新表格
    async searchTypeList() {
      const { code, data } = await asyncRequestStyle.list({
        limit: 999999,
        page: 1,
      });
      this.store_spec_ids_options = code === 1 ? data.list : [];
    },
  },
};
</script>

<style lang="scss" scoped>
.baseData {
  .clear-main {
    .clear-left {
      float: left;
      width: 70px;
    }
    .clear-right {
      float: left;
      width: calc(100% - 70px);
    }
  }
  // padding: 26px 16px 0 0;
}
</style>
