<template>
  <section class="event">
    <ai-list>
      <ai-title slot="title" title="村务公开" isShowBottomBorder></ai-title>
      <template slot="content">
        <ai-search-bar>
          <template slot="left">
            <el-button icon="iconfont iconAdd" type="primary" size="small" @click="toAdd">添加</el-button>
          </template>
          <template slot="right">
            <el-input
                placeholder="请输入标题"
                size="small"
                clearable
                v-model="search.title"
                v-throttle="() => {search.current = 1, getList()}"
                @clear="search.current = 1, search.title = '', getList()"
                suffix-icon="iconfont iconSearch"/>
          </template>
        </ai-search-bar>
        <div class="ai-table">
          <ai-table
              :tableData="tableData"
              :col-configs="colConfigs"
              :total="total"
              :current.sync="search.current"
              :size.sync="search.size"
              @getList="getList">
            <el-table-column slot="options" label="操作" align="center" width="250" fixed="right">
              <template slot-scope="{ row }" class="fs-14">
                <div class="table-options">
                  <el-button
                      type="text"
                      @click="publish(row)"
                      title="发布">
                    发布
                  </el-button>
                  <el-button
                      type="text"
                      title="详情"
                      @click="toDetail(row.id)">
                    详情
                  </el-button>
                  <el-button
                      type="text"
                      title="编辑"
                      @click="toEdit(row.id)">
                    编辑
                  </el-button>
                  <el-button
                      @click="remove(row.id)"
                      type="text"
                      title="删除">
                    删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </ai-table>
        </div>
      </template>
    </ai-list>
    <ai-dialog title="请选择发布平台企业" :visible.sync="dialog" width="600px" @onConfirm="saveSaas">
      <el-form ref="saasForm" :model="dialogForm" size="small" label-width="120px">
        <el-form-item required label="saas平台" prop="saasId" :rules="[{required: true, message: '请选择saas平台'}]">
          <el-select v-model="dialogForm.saasId" placeholder="请选择saas平台" style="width:100%;" @change="getCompanyList">
            <el-option
                v-for="item in saasList"
                :key="item.value"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item required label="saas企业" prop="corpId" :rules="[{required: true, message: '请选择saas企业'}]">
          <el-select v-model="dialogForm.corpId" placeholder="请选择saas企业" style="width:100%;" @change="selectCompany">
            <el-option
                v-for="item in companyList"
                :key="item.value"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item required label="地区" prop="areaId" :rules="[{required: true, message: '请选择发布地区'}]">
          <ai-area-get :instance="instance" v-model="dialogForm.areaId" :root="rootId"
                       :name.sync="dialogForm.areaName"/>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'event',

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

  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        {prop: 'type', label: '类型', formart: v => this.dict.getLabel('villInfoType', v)},
        {prop: 'title', label: '标题', align: 'left'},
        {prop: 'createDate', label: '创建时间', dateFormart: 'YYYY-MM-DD', align: 'center'},
        {prop: 'createUser', label: '发布人', align: 'center'},
        {slot: 'options', label: '操作'}
      ]
    }
  },

  data() {
    return {
      search: {
        current: 1,
        size: 10,
        title: ''
      },
      total: 0,
      ids: [],
      tableData: [],
      dialog: false,
      dialogForm: {},
      saasList: [],
      companyList: [],
      rootId: ''
    }
  },
  mounted() {
    this.dict.load('villInfoType').then(() => {
      this.getList()
      this.getsaasList()
    })
  },

  methods: {
    getsaasList() {
      this.instance.post("/appSaas/page", null, {
        params: {size: 10000}
      }).then(res => {
        if (res?.data) {
          this.saasList = res.data?.records
        }
      })
    },

    getCompanyList() {
      this.instance.post("/appCorp/page", null, {
        params: {saasId: this.dialogForm.saasId, size: 10000}
      }).then(res => {
        if (res?.data) {
          this.companyList = res.data.records
          this.rootId = ''
          this.dialogForm.areaId = ''
          this.corpId = ''
        }
      })
    },

    selectCompany() {
      this.companyList.map(item => {
        if (item.id == this.dialogForm.corpId) {
          this.rootId = item.areaId
          this.dialogForm.areaId = item.areaId
        }
      })
    },

    getList() {
      this.instance.post(`/appvillageinfo/list`, null, {
        params: {
          ...this.search,
          areaId: this.areaId
        }
      }).then(res => {
        if (res.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },

    publish(params) {
      this.dialogForm.id = params.id
      this.dialog = true
    },

    toAdd() {
      this.$router.push({hash: "#add"})
    },
    toEdit(id) {
      this.$router.push({hash: "#add", query: {id}})
    },

    toDetail(id) {
      this.$router.push({query: {id}})
    },

    remove(id) {
      this.$confirm('确定删除该数据？').then(() => {
        this.instance.post(`/app/appvillageinfo/delete?ids=${id}`).then(res => {
          if (res.code == 0) {
            this.$message.success('删除成功！')
            this.getList()
          }
        })
      })
    },

    saveSaas() {
      this.$refs.saasForm.validate(v => {
        if (v) {
          this.instance.post(`/appvillageinfo/sync?corpId=${this.dialogForm.corpId}&id=${this.dialogForm.id}&areaId=${this.dialogForm.areaId}`).then(res => {
            if (res?.code == 0) {
              this.dialog = false;
              this.$message.success("发布成功")
              this.dialogForm = {}
            } else {
              this.$message.error(res?.msg)
            }
          })
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.event {
  height: 100%;

  ::v-deep th {
    font-weight: bold !important;
  }

  ::v-deep .table-options {
    span {
      font-size: 14px !important;
    }
  }
}

.table-btn {
  margin-right: 16px;
  font-size: 14px;
  color: #2266FF;
  cursor: pointer;

  &:hover {
    opacity: 0.6;
  }

  &:last-child {
    margin-right: 0;
  }

  &:last-child:hover {
    color: #f46;
    opacity: 1;
  }
}
</style>
