<script>
import AiLibTable from "../AiLibTable.vue";

export default {
  name: "wxmpConfig",
  components: {AiLibTable},
  model: {
    prop: "form",
    event: "input"
  },
  props: {
    form: Object,
    title: String
  },
  watch: {
    form: {
      handler() {
        this.$emit("input", this.form)
      },
      deep: true
    }
  },
  data() {
    return {
      colConfigs: [
        {prop: 'text', label: "名称", width: 120},
        {prop: 'pagePath', label: "应用路径"},
        {prop: 'iconPath', label: "默认图标"},
        {prop: 'selectedIconPath', label: "选中图标"},
      ],
      tabBar: {
        color: "#666666",
        selectedColor: "#197DF0",
        backgroundColor: "#ffffff",
        list: [
          {pagePath: "pages/AppHome/AppHome", text: "首页", iconPath: "static/TabBar/home.png", selectedIconPath: "static/TabBar/home_selected.png"},
          {pagePath: "pages/AppModules/AppModules", text: "应用", iconPath: "static/TabBar/service.png", selectedIconPath: "static/TabBar/service_selected.png"},
          {
            pagePath: "pages/AppEnteringVillage/AppEnteringVillage", text: "进村",
            iconPath: "static/TabBar/custom.png", selectedIconPath: "static/TabBar/custom_selected.png"
          },
          {pagePath: "pages/AppMine/AppMine", text: "我的", iconPath: "static/TabBar/me.png", selectedIconPath: "static/TabBar/me_selected.png"}
        ]
      }
    }
  },
  methods: {
    handleTabbarChange(row, {name, label}) {
      row.text = label
      row.pagePath = `pages/${name}/${name}`
    },
    handleTabbarDelete(i) {
      this.tabBar.list?.splice(i, 1)
    },
    handleTabbarPosition(i, offset) {
      const row = this.tabBar.list[i]
      this.tabBar.list.splice(i, 1, this.tabBar.list[i + offset])
      this.tabBar.list.splice(i + offset, 1, row)
    }
  }
}
</script>

<template>
  <ai-card :title="title" class="wxmpConfig">
    <template #content>
      <el-form-item label="小程序AppId">
        <el-input v-model="form.appId" clearable placeholder="小程序appId"/>
      </el-form-item>
      <el-form-item label="半屏小程序">
        <el-input v-model="form.embeddedAppIdList" clearable placeholder="如果有多个,请用英文','分割"/>
      </el-form-item>
      <el-form-item label="接口是否单服务">
        <el-checkbox v-model="form.isSingleService"/>
      </el-form-item>
      <el-form-item label="引导页">
        <el-input v-model="form.guide" placeholder="带'/'会被认为是输入的页面路径" clearable/>
      </el-form-item>
      <ai-title class="row" title="底部导航栏">
        <el-button type="text" slot="rightBtn" icon="iconfont iconAdd" @click="tabBar.list.push({})">添加</el-button>
      </ai-title>
      <ai-table class="row" :tableData="tabBar.list" :colConfigs="colConfigs" tableSize="mini" :isShowPagination="false" border ref="TabBar">
        <el-table-column slot="options" label="操作" width="260" align="center">
          <template slot-scope="{row,$index}">
            <el-row type="flex" class="tabBarOptions">
              <ai-dialog-btn text="更换" dialogTitle="选择应用">
                <ai-lib-table :meta="appList" v-model="row.id" @select="v=>handleTabbarChange(row,v)" :isShowPagination="false" v-bind="$props"
                              :border="false"/>
              </ai-dialog-btn>
              <ai-dialog-btn text="编辑" dialogTitle="编辑导航栏" width="600px">
                <el-form-item label="名称">
                  <el-input v-model="row.text" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="默认图标">
                  <el-input v-model="row.iconPath" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="选中图标">
                  <el-input v-model="row.selectedIconPath" placeholder="请输入" clearable/>
                </el-form-item>
              </ai-dialog-btn>
              <el-button type="text" @click="handleTabbarDelete($index)">删除</el-button>
              <el-button type="text" @click="handleTabbarPosition($index,-1)" v-if="$index>0">上移</el-button>
              <el-button type="text" @click="handleTabbarPosition($index,1)" v-if="$index<tabBar.list.length-1">下移</el-button>
            </el-row>
          </template>
        </el-table-column>
      </ai-table>
    </template>
  </ai-card>
</template>

<style scoped lang="scss">
.wxmpConfig {
}
</style>
