<template>
  <view class="bg-white br12 p-0-20">
    <view class="d-b-c p-30-0 border-b">
      <view class="f28 fb">{{ $t("ENU_G_C_5") }}</view>
      <view @click="clickFold">
        <u-icon
          name="arrow-down"
          size="28rpx"
          color="#999999"
          v-if="fold"
        ></u-icon>
        <u-icon name="arrow-right" size="28rpx" color="#999999" v-else></u-icon>
      </view>
    </view>
    <view class="collspaceContent" :class="{ closed: !fold }">
      <view class="d-b-c p-20-0 border-b">
        <view class="f28 gray3">{{ $t("S_C_7") }}：{{ $t("S_C_68") }}</view>
        <picker :range="monthList" @change="changeMonth">
          <view class="common picker">
            <text>{{ monthList[monthIndex] }}{{ $t("S_C_62") }}</text>
            <u-icon name="arrow-down" size="28rpx" color="#333"></u-icon>
          </view>
        </picker>
      </view>

      <view class="prefecture form-group">
        <view class="pb20">
          <view class="form-item">
            <view class="form-label">
              <text class="domation mr10">*</text>
              {{ $t("S_C_22") }}
            </view>
            <input
              class="form-input"
              type="number"
              v-model="totalAchieve"
              :placeholder="$t('S_C_70')"
              @input="changTotalAchieve"
            />
          </view>
          <view class="form-item">
            <view class="form-label">
              {{ $t("S_C_9") }}
            </view>
            <view class="flex-1">
              <text class="domation mr10">*</text>
              <text class="f28">{{ $t("ENU_G_C_5") }}</text>
            </view>
          </view>

          <view class="form-item" v-for="(v, idx) in goalsDetailVOList">
            <view class="form-label">
              {{ $t(transformZh(idx + 1)) }}
            </view>
            <input
              class="form-input"
              type="text"
              v-model="v.cycleValue"
              :placeholder="$t('S_C_70')"
            />
          </view>
          <template v-if="!loading">
            <view
              class="c-f2 p20"
              v-for="(v, idx) in goalsMeetingVOList"
              :key="idx"
            >
              <view class="prefecture form-group">
                <view class="form-item">
                  <view class="form-label">
                    <text class="domation mr10">*</text>
                    {{ $t("S_C_24") }}
                  </view>
                  <input
                    class="form-input"
                    type="text"
                    value=""
                    v-model="v.meetingType"
                    :placeholder="$t('S_C_70')"
                  />
                </view>
                <view class="form-item">
                  <view class="form-label">
                    <text class="domation mr10">*</text>
                    {{ $t("S_C_25") }}
                  </view>
                  <input
                    class="form-input"
                    type="text"
                    value=""
                    v-model="v.meetingNumber"
                    :placeholder="$t('S_C_70')"
                  />
                </view>
                <view class="form-item" @click="showMulLinkageThreePicker(idx)">
                  <view class="form-label">
                    <text class="domation mr10">*</text>
                    {{ $t("S_C_26") }}
                  </view>
                  <view class="d-s-c">
                    <input
                      class="form-input"
                      type="text"
                      value=""
                      v-model="v.selectCity"
                      disabled
                      :placeholder="$t('S_C_30')"
                    />
                    <view class="icon iconfont fb icon-icon1"></view>
                  </view>
                </view>
                <view class="form-item">
                  <view class="form-label">
                    <text class="domation mr10">*</text>
                    {{ $t("S_C_27") }}
                  </view>
                  <input
                    class="form-input"
                    type="text"
                    value=""
                    v-model="v.address"
                    :placeholder="$t('S_C_70')"
                  />
                </view>
                <view class="form-item">
                  <view class="form-label">
                    <text class="domation mr10">*</text>
                    {{ $t("S_C_28") }}
                  </view>
                  <input
                    class="form-input"
                    type="text"
                    value=""
                    v-model="v.meetingTheme"
                    :placeholder="$t('S_C_70')"
                  />
                </view>
                <view class="form-item">
                  <view class="form-label">
                    <text class="domation mr10">*</text>
                    {{ $t("S_C_29") }}
                  </view>
                  <input
                    class="form-input"
                    type="text"
                    value=""
                    v-model="v.remarks"
                    :placeholder="$t('S_C_70')"
                  />
                </view>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>

    <mpvue-city-picker
      v-if="is_load"
      ref="mpvueCityPicker"
      :province="province"
      :city="city"
      :area="area"
      :pickerValueDefault="cityPickerValueDefault"
      @onConfirm="onConfirm"
    ></mpvue-city-picker>
  </view>
</template>

<script>
import utils from "@/common/utils.js";
import mpvueCityPicker from "@/components/mpvue-citypicker/mpvueCityPicker.vue";
export default {
  components: {
    mpvueCityPicker,
  },
  props: ["data", "monthList", "monthIndex"],

  data() {
    return {
     loading: false,
      fold: false,
      currentAraeIdx: "",
      recProvince: 0,
      recCity: 0,
      recCounty: 0,
      is_load: false,
      province: [],
      city: [],
      area: [],
      cityPickerValueDefault: [0, 0, 0],
      totalAchieve: "",
      goalsDetailVOList: [
        {
          cycleKey: "m1",
          cycleValue: "",
        },
        {
          cycleKey: "m2",
          cycleValue: "",
        },
        {
          cycleKey: "m3",
          cycleValue: "",
        },
        {
          cycleKey: "m4",
          cycleValue: "",
        },
      ],
      goalsMeetingVOList: [],
    };
  },
  mounted() {
    this.getCityData();
  },
  //普通监听
  watch: {
    goalsMeetingVOList: {
      deep: true,
      handler: function (n, o) {
        this.$emit("chang-file-data", n);
      },
      immediate: true,
    },
  },
  methods: {
    clickFold() {
      this.fold = !this.fold;
    },
    changTotalAchieve(e) {
      this.loading = true;
      let num = e.detail.value;
      this.goalsMeetingVOList = [];
      if (num) {
        num = Number(num);
      }
      for (let i = 0; i < num; i++) {
        this.goalsMeetingVOList.push({
          meetingType: "",
          meetingNumber: "",
          meetingTheme: "",
          pkProvince: "",
          pkCity: "",
          pkCounty: "",
          areaAddress: [],
          address: [],
          meetingDate: "",
          selectCity: "",
          remarks: "",
        });
      }
      let req = {
        totalAchieve: num,
        goalsDetailVOList: this.goalsDetailVOList,
      };
      this.$emit("chang-conference-num", req);
      this.loading = false;
    },
    getCityData() {
      let self = this;
      self._get("system/api/area/tree", {}, function (res) {
        self.province = res.data;
        self.is_load = true;
      });
    },
    onConfirm(event) {
      let obj = {
        selectCity: event.label,
        pkProvince: event.cityCode[0],
        pkCity: event.cityCode[1],
        pkCounty: event.cityCode[2],
        areaAddress: event.cityCode,
      };
      let addData = Object.assign(
        this.goalsMeetingVOList[this.currentAraeIdx],
        obj
      );
      this.$set(this.goalsMeetingVOList, this.currentAraeIdx, addData);
    },
    changeMonth(e) {
      this.$emit("change-month", e);
    },
    transformZh(index) {
      return utils.numberToChinese(index, "quarter");
    },
    showMulLinkageThreePicker(index) {
      this.currentAraeIdx = index;
      this.$refs.mpvueCityPicker.show();
    },
    filterFields(arr) {
      var newObj = {};
      var newArr = [];
      arr.forEach(function (item, i) {
        for (var key in item) {
          if (key != "selectCity") {
            newObj[key] = item[key];
          }
        }
        newArr.push(newObj);
        newObj = {};
      });
      return newArr;
    },
    submit() {
      if (!this.totalAchieve) {
        uni.showToast({
          title: `${this.$t("S_C_70")}${this.$t("S_C_22")}`,
          duration: 1000,
          icon: "none",
        });
        return;
      }
      if (this.goalsDetailVOList.length < 1) {
        uni.showToast({
          title: `${this.$t("S_C_70")}${this.$t("S_C_23")}`,
          duration: 1000,
          icon: "none",
        });
        return;
      }
      let flag = this.goalsDetailVOList.every((item) => {
        return item.cycleValue;
      });
      if (!flag) {
        uni.showToast({
          title: `${this.$t("S_C_70")}${this.$t("S_C_23")}`,
          duration: 1000,
          icon: "none",
        });
        return;
      }

      let goalsFlag = this.goalsMeetingVOList.every((item) => {
        return (
          item.meetingType &&
          item.meetingNumber &&
          item.pkProvince &&
          item.pkCity &&
          item.pkCounty &&
          item.address &&
          item.meetingTheme
        );
      });

      if (!goalsFlag) {
        uni.showToast({
          title: `${this.$t("S_C_70")}${this.$t("S_C_23")}${this.$t(
            "MN_F_T_144"
          )}`,
          duration: 1000,
          icon: "none",
        });
        return;
      }
      let newArr = this.filterFields(this.goalsMeetingVOList);
      this.$props.data.totalAchieve = this.totalAchieve;
      this.$props.data.goalsDetailVOList = JSON.parse(
        JSON.stringify(this.goalsDetailVOList)
      );
      this.$props.data.goalsMeetingVOList = JSON.parse(JSON.stringify(newArr));
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.collspaceContent {
  max-height: 6000rpx;
  overflow: hidden;
  transition: all ease 0.8s;

  &.closed {
    max-height: 0;
    transition: all ease 0.6s;
  }
}
</style>