<!--
 * @Date: 2022-06-20 11:35:50
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-06-21 19:10:41
 * @FilePath: /tswj/src/components/LocalismBox/index.vue
 * @Description: 调整作品方言弹框组件
-->
<template>
  <van-overlay :show="show" z-index="1000" :lock-scroll="false">
    <div class="wrapper" @click.stop>
      <div class="block">
        <div class="close">
          <van-icon name="close" color="#FFFFFF" @click="handleClose" />
        </div>
        <div class="localism-title">{{ title }}</div>
        <div id="localism-list" class="localism-list">
          <div v-for="(item, index) in localismList" :id="item.id" :key="index"
            :class="[item.checked ? 'checked' : 'unchecked', 'van-hairline--top-bottom', 'localism-item']"
            @click="setLocalism(item.id)">
            {{ item.localism }}
          </div>
          <div v-show="show_localism" id="localism-bottom" class="van-hairline--top-bottom localism-item">
            <input v-model="localism_name" placeholder="请输入新增的方言名称" style="border: 0; text-align: center;"
              @blur="onBlur">
          </div>
        </div>
        <div class="bar">
          <div class="button">
            <my-button type="plain" @on-click="addLocalism">新增方言</my-button>
          </div>
          <div class="button">
            <my-button type="primary" @on-click="handleSubmit">确定</my-button>
          </div>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
import MyButton from '@/components/MyButton/index.vue'
import { localismListModiAPI, addLocalismAPI, modifyProdLocalismAPI } from '@/api/B/localism'
import { Toast, Dialog } from '@/utils/generatePackage.js'

const props = defineProps({
  showLocalism: Boolean,
  id: Number,
  localism: String,
  title: String,
})
const emit = defineEmits(['on-close', 'on-submit']);
/**
 * 滚动到指定位置
 * @param {*} id 
 */
const scrollToDom = (id) => {
  nextTick(() => {
    document.getElementById(id)?.scrollIntoView({ block: 'center' });
  })
}

// 处理语言列表数据
let localismList = ref([]);
const raw_id = ref('')
const getLocalismList = async () => {
  const { data } = await localismListModiAPI();
  localismList.value = data.map((item) => ({ id: item, localism: item, checked: false }))
  localismList.value.forEach((item) => {
    if (item.localism === props.localism) {
      item.checked = true;
      raw_id.value = item.id
    }
  });
  scrollToDom(props.localism);
}

let show = ref(false);
watch(() => props.showLocalism, (v) => {
  show.value = v;
  if (v) {
    getLocalismList()
  }
})

// 点击行选择方言
const setLocalism = (v) => {
  localismList.value.forEach((item) => {
    item.checked = false;
  });
  localismList.value.forEach((item) => {
    if (item.id === v) {
      item.checked = true;
    }
  });
}

// 新增方言
const show_localism = ref(false)
const localism_name = ref('')

const addLocalism = () => { // 滚动到底部，显示新增输入框
  show_localism.value = true;
  const id = localismList.value[localismList.value.length - 1]['id'];
  scrollToDom(id);
}

const onBlur = () => { // 失焦保存录入方言
  if (!localism_name.value) return false;
  Dialog.confirm({
    title: '温馨提示',
    message: `是否确认新增${localism_name.value}？`,
    confirmButtonColor: '#11D2B1'
  })
    .then(async () => {
      const { code } = await addLocalismAPI({ localism_name: localism_name.value });
      if (code) {
        Toast.success('新增成功！');
        localismList.value.forEach((item) => {
          item.checked = false;
        });
        localismList.value.push({ id: localism_name.value, localism: localism_name.value, checked: true });
        scrollToDom(localism_name.value);
      }
      show_localism.value = false;
      localism_name.value = '';
    })
    .catch(() => {
      // on cancel
    });
}

const clearAll = () => {
  show.value = false
  show_localism.value = false
  localismList.value = []
  localism_name.value = ''
}

const handleClose = () => { // 关闭提示框回调
  clearAll();
  emit('on-close', false)
}

const handleSubmit = () => { // 提交选择方言
  const localism = localismList.value.filter((item) => item.checked === true);
  // 原始和提交不一致请求接口提交
  if (raw_id.value !== localism[0].id) {
    Dialog.confirm({
      title: '温馨提示',
      message: `是否确认设置方言为${localism[0].id}？`,
      confirmButtonColor: '#11D2B1'
    })
      .then(async () => {
        const { code } = await modifyProdLocalismAPI({ prod_id: props.id, localism_name: localism[0].id });
        if (code) {
          Toast.success('更新成功！');
          clearAll();
          emit('on-submit', localism[0].id);
        }
      })
      .catch(() => {
        // on cancel
      });
  } else {
    clearAll();
    emit('on-submit', raw_id.value);
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: auto;
  text-align: center;
}

.block {
  width: 80%;
  // height: 25rem;
  background-color: #fff;
  border-radius: 10px;
  padding: 1rem 0;
  position: relative;
  margin-top: 1rem;
  margin-bottom: 5rem;
  .close {
    position: absolute;
    top: -2rem;
    right: 1rem;
    font-size: 1.5rem;
  }
}
.localism-title {
  font-size: 1.05rem;
}
.localism-list {
  margin-top: 2rem;
  height: 20rem;
  overflow: scroll;
}

.bar {
  display: flex;
  align-items: center;
  box-sizing: content-box;
  background-color: white;
  padding: 0.7rem;

  .button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 0 0.5rem;
  }
}

.localism-item {
  padding: 1rem;
  text-align: center;
}
.checked {
  color: #11d2b1;
}
.unchecked {
  color: gray;
}
input::-webkit-input-placeholder {
  color: #B0B0B0;
}
</style>