<template>
  <section class="list">
    <ai-list>
      <ai-title slot="title" title="企业管理" isShowBottomBorder/>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-select v-model="search.saasId" size="small" placeholder="请选择saas平台" @change="getDataInit">
              <el-option
                  v-for="item in saasList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </template>
        </ai-search-bar>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" icon="iconfont iconAdd" @click="dialogForm = {}, dialog=true">添加</el-button>
          </template>
          <template #right>
            <el-input size="small" placeholder="企业名称" v-model="search.name" clearable @change="getDataInit"/>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                  @getList="getTableData" :col-configs="colConfigs" :dict="dict"
                  @selection-change="v=>ids=v.filter(e=>e.id).map(e=>e.id)">
          <el-table-column slot="options" align="center" label="操作" fixed="right" width="240px">
            <div class="table-options" slot-scope="{ row }">
              <el-button type="text" @click="handleEnter(row.accessUrl)">打开</el-button>
              <el-button type="text" @click="handleSync(row.corpId)">同步</el-button>
              <el-button type="text" @click="toStatistics(row)">统计</el-button>
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
            </div>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog :title="dialogTitle" :visible.sync="dialog" width="600px" @onConfirm="saveSaas">
      <el-form ref="saasForm" :model="dialogForm" :rules="rules" size="small" label-width="120px">
        <el-form-item required label="名称" prop="name">
          <el-input v-model.trim="dialogForm.name" placeholder="请输入saas企业名称" clearable :maxLength="50"/>
        </el-form-item>
        <el-form-item required label="saas平台" prop="saasId">
          <el-select v-model="dialogForm.saasId" placeholder="请选择saas平台" style="width:100%;">
            <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="地区" prop="areaId" :rules="[{required: true, message: '请选择发布地区'}]">
          <ai-area-get :instance="instance" v-model="dialogForm.areaId" :name.sync="dialogForm.areaName"/>
        </el-form-item>
        <el-form-item required label="企业CORP_ID" prop="corpId" :rules="[{required: true, message: '请输入企业CORP_ID'}]">
          <el-input v-model.trim="dialogForm.corpId" placeholder="请输入企业CORP_ID" clearable :maxLength="50"/>
        </el-form-item>
        <el-form-item label="AGENT_ID" prop="corpAgentId">
          <el-input v-model.trim="dialogForm.corpAgentId" placeholder="请输入企业AGENT_ID" clearable :maxLength="50"/>
        </el-form-item>
        <el-form-item label="CORP_SECRET" prop="corpSecret">
          <el-input v-model.trim="dialogForm.corpSecret" placeholder="请输入企业CORP_SECRET" clearable :maxLength="50"/>
        </el-form-item>
        <el-form-item label="企业通讯录SECRET" prop="corpAddressBookSecret">
          <el-input v-model.trim="dialogForm.corpAddressBookSecret" placeholder="请输入企业通讯录SECRET" clearable
                    :maxLength="50"/>
        </el-form-item>
        <el-form-item label="访问地址" prop="accessUrl" :rules="[{required: true, message: '请输入访问地址'}]">
          <el-input v-model.trim="dialogForm.accessUrl" placeholder="请输入访问地址" clearable
                    :maxLength="255"/>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>

export default {
  name: "list",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    isEdit() {
      return !!this.dialogForm.id
    },
    dialogTitle() {
      return this.isEdit ? '修改saas企业' : '添加saas企业'
    },
    colConfigs() {
      return [
        {label: "名称", prop: "name"},
        {label: "saas平台", prop: "saasName", align: 'center'},
        {label: "地区", prop: "areaName", align: 'center'},
        {label: "企业CORP_ID", prop: "corpId", align: 'center'},
        {label: "访问地址", prop: "accessUrl"},
        {label: "创建时间", prop: "createTime"},
        {slot: "options"}
      ]
    },
    rules() {
      return {
        name: [{required: true, message: "请输入saas企业名称"}],
        saasId: [{required: true, message: "请选择saas平台"}],
      }
    },
    updateRules() {
      return {
        password: [{required: true, message: "请输入平台密码"}]
      }
    }
  },
  data() {
    return {
      page: {current: 1, size: 10, total: 0},
      dialog: false,
      dialogForm: {},
      tableData: [],
      search: {name: "", saasId: ''},
      ids: [],
      saasList: []
    }
  },
  methods: {
    getsaasList() {
      this.instance.post("/appSaas/page", null, {
        params: {size: 10000}
      }).then(res => {
        if (res?.data) {
          this.saasList = res.data?.records
        }
      })
    },
    getDataInit() {
      this.page.current = 1
      this.getTableData()
    },
    getTableData() {
      this.instance.post("/appCorp/page", null, {
        params: {...this.page, ...this.search}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        }
      })
    },
    // 新增/修改
    saveSaas() {
      this.$refs.saasForm.validate(v => {
        if (v) {
          this.saasList.map(item => {
            if (item.id == this.dialogForm.saasId) {
              this.dialogForm.saasName = item.name
            }
          })
          this.instance.post("/appCorp/addOrUpdate", this.dialogForm).then(res => {
            if (res?.code == 0) {
              this.dialog = false;
              this.$message.success("保存成功")
              this.getTableData();
            } else {
              this.$message.error(res?.msg)
            }
          })
        }
      })
    },
    handleEdit(row) {
      this.dialogForm = row
      this.dialog = true
    },
    handleDelete(ids) {
      this.$confirm("是否要删除该Saas信息?").then(() => {
        this.instance.post("/appCorp/delete", null, {
          params: {ids}
        }).then(res => {
          if (res?.code == 0) {
            this.getTableData();
            this.$message.success("删除成功!");
          }
        })
      }).catch(() => 0)
    },
    handleSync(corpId) {
      this.$confirm("是否确定同步该企业数据?").then(() => {
        this.instance.post("/appCorpStat/syncData?corpId=" + corpId, null, {}).then(res => {
          if (res?.code == 0) {
            this.getTableData();
            this.$message.success("同步成功!");
          }
        })
      }).catch(() => 0)
    },
    handleEnter(accessUrl) {
      window.open(accessUrl, "_blank");
    },
    toStatistics(item) {
      let {corpId} = item
      this.$router.push({query: {corpId}, hash: "#sta"})
    },
  },
  created() {
    this.getsaasList()
    this.getTableData()
  }
}
</script>

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

}
</style>
