<template>
  <div class="saas-manage">
    <div class="search">
      <el-form
        :model="searchForm"
        size="small"
        :inline="true"
      >
        <el-form-item label="">
          <el-select
            style="width: 80px"
            v-model="searchForm.timeProp"
            placeholder="请选择"
          >
            <el-option
              label="创建时间"
              value="createTime"
            ></el-option>
            <el-option
              label="过期时间"
              value=""
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            style="width: 360px"
            v-model="period"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:ss:mm"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="域名">
          <el-input
            size="small"
            style="width: 160px"
            v-model="searchForm.domain"
            placeholder="请输入域名"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input
            v-model="searchForm.status"
            style="width: 160px"
            size="small"
            placeholder="请选择状态"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司名称">
          <el-input
            size="small"
            style="width: 160px"
            v-model="searchForm.companyName"
            placeholder="请输入公司名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input
            size="small"
            style="width: 160px"
            v-model="searchForm.headName"
            placeholder="请输入负责人"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="search"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            size="small"
            icon="el-icon-plus"
            @click="addData"
            >开通erp</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="deleteData"
            >删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table-wrap">
      <el-table
        ref="table"
        :data="manageData"
        border
        width="100%"
        height="100%"
        :highlight-current-row="true"
        @selection-change="handleSelectionChange"
        @row-click="rowClick"
        header-row-class-name="header-row-class-name"
      >
        <el-table-column
          type="selection"
          width="55"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          label="域名"
          prop="domain"
          header-align="center"
        ></el-table-column>
        <el-table-column
          label="状态"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              disabled
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="公司名称"
          prop="companyName"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          label="负责人"
          prop="headName"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          label="联系电话"
          prop="contactPhone"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          label="套餐"
          prop="packages"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          label="资费"
          prop="charges"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          label="数据库地址"
          prop="dataHost"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          label="数据库名称"
          prop="databaseName"
          header-align="center"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          label="过期时间"
          prop="expireTime"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="55"
        >
          <template slot-scope="scope">
            <i
              class="el-icon-edit"
              style="cursor: pointer"
              @click="handleEdit(scope.row)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        layout="sizes, total, prev, pager, next, jumper"
        background
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="sizeChange"
        @current-change="onCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="editId ? '编辑' : '新增'"
      :visible.sync="addVisible"
      :close-on-click-modal="false"
      width="700px"
    >
      <el-form
        :model="editForm"
        size="small"
        ref="form"
        :inline="true"
        label-width="110px"
        label-position="right"
      >
        <el-form-item
          label="域名"
          prop="domain"
          :rules="[
            { required: true, message: '请输入域名' },
          ]"
        >
          <el-input
            style="width: 200px"
            v-model="editForm.domain"
            size="small"
            clearable
            @change="onChange"
            placeholder="请输入域名"
          >
            <template slot="append">.joshine.cn</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="状态"
          prop="status"
          :rules="[
            { required: true, message: '请选择状态' },
          ]"
        >
          <el-select
            style="width: 200px"
            v-model="editForm.status"
            clearable
            placeholder="请选择状态"
          >
            <el-option
              label="启用"
              :value="true"
            ></el-option>
            <el-option
              label="禁用"
              :value="false"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="二级域名"
          prop="customDomain"
          :rules="[
            { required: true, message: '请输入二级域名' },
          ]"
        >
          <el-input
            style="width: 200px"
            v-model="editForm.customDomain"
            placeholder="请输入二级域名"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="Api Name"
          prop="apiName"
          :rules="[
            { required: true, message: '请输入Api Name' },
          ]"
        >
          <el-input
            style="width: 200px"
            v-model="editForm.apiName"
            placeholder="请输入Api Name"
            size="small"
            disabled
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="数据库类型"
          prop="databaseType"
          :rules="[
            { required: true, message: '请输入数据库类型' },
          ]"
        >
          <el-input
            size="small"
            style="width: 200px"
            placeholder="请输入数据库类型"
            v-model="editForm.databaseType"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="数据源地址"
          prop="dataHost"
          :rules="[
            { required: true, message: '请输入数据源地址' },
          ]"
        >
          <el-input
            size="small"
            style="width: 200px"
            placeholder="请输入数据源地址"
            v-model="editForm.dataHost"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="数据源端口"
          prop="dataPort"
          :rules="[
            { required: true, message: '请输入数据源端口' },
          ]"
        >
          <el-input
            size="small"
            style="width: 200px"
            placeholder="请输入数据源端口"
            v-model="editForm.dataPort"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="数据库名称"
          prop="databaseName"
          :rules="[
            { required: true, message: '请输入数据库名称' },
          ]"
        >
          <el-input
            style="width: 200px"
            v-model="editForm.databaseName"
            size="small"
            disabled
            placeholder="请输入数据库名称"
          >
            <template slot="prepend">saas_</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="数据库用户名"
          prop="databaseUserName"
          :rules="[
            {
              required: true,
              message: '请输入数据库用户名',
            },
          ]"
        >
          <el-input
            size="small"
            style="width: 200px"
            placeholder="请输入数据库用户名"
            v-model="editForm.databaseUserName"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="数据库密码"
          prop="databasePwd"
          :rules="[
            { required: true, message: '请输入数据库密码' },
          ]"
        >
          <el-input
            size="small"
            style="width: 200px"
            placeholder="请输入数据库密码"
            v-model="editForm.databasePwd"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="过期时间"
          prop="expireTime"
          :rules="[
            { required: true, message: '请选择过期时间' },
          ]"
        >
          <el-date-picker
            style="width: 200px"
            v-model="editForm.expireTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="公司名称"
          prop="companyName"
          :rules="[
            { required: true, message: '请输入公司名称' },
          ]"
        >
          <el-input
            style="width: 200px"
            v-model="editForm.companyName"
            size="small"
            placeholder="请输入公司名称"
          />
        </el-form-item>
        <el-form-item
          label="负责人"
          prop="headName"
          :rules="[
            { required: true, message: '请输入负责人' },
          ]"
        >
          <el-input
            style="width: 200px"
            v-model="editForm.headName"
            size="small"
            placeholder="负责人"
          />
        </el-form-item>
        <el-form-item
          label="联系电话"
          prop="contactPhone"
          :rules="[
            { required: true, message: '请输入联系电话' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的电话号码格式', trigger: 'blur' },
          ]"
        >
          <el-input
            style="width: 200px"
            v-model="editForm.contactPhone"
            size="small"
            placeholder="请输入联系电话"
          />
        </el-form-item>
        <el-form-item
          label="套餐"
          prop="packages"
          :rules="[
            { required: true, message: '请输入套餐' },
          ]"
        >
          <el-input
            style="width: 200px"
            v-model="editForm.packages"
            size="small"
            placeholder="请输入套餐"
          />
        </el-form-item>
        <el-form-item
          label="资费"
          prop="charges"
          :rules="[
            { required: true, message: '请输入资费' },
          ]"
        >
          <el-input
            style="width: 200px"
            v-model="editForm.charges"
            size="small"
            placeholder="请输入资费"
          />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addVisible = false" size="small"
          >取消</el-button
        >
        <el-button @click="save" type="primary" size="small"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getManageData,
  addManageData,
  updateManageData,
  getDataById,
  deleteData,
} from '@/common/api/manage/index'
export default {
  name: 'saasManage',
  data() {
    return {
      period: [],
      manageData: [],
      searchForm: {},
      editId: undefined,
      editForm: {
        domain: '',
      },
      total: 0,
      pageSize: 50,
      currentPage: 1,
      addVisible: false,
      selection: [],
      cloneEditForm: {},
    }
  },
  async created() {
    this.cloneEditForm = JSON.parse(
      JSON.stringify(this.editForm),
    )
    this.getList()
  },
  methods: {
    onChange(e) {
      this.$set(this.editForm, 'apiName', e)
      this.$set(this.editForm, 'databaseName', e)
    },
    async getList() {
      const l = this.$loading({
        background: 'rgba(0, 0, 0, 0.3)',
      })
      try {
        const res = await getManageData(
          {
            ...this.searchForm,
            beginDate: this.period && this.period[0],
            endDate: this.period && this.period[1],
          },
          this.currentPage,
          this.pageSize,
        )
        this.manageData = res.data.records
        this.total = res.data.total
      } catch (e) {
        console.error(e)
      } finally {
        l.close()
      }
    },
    search() {
      this.getList()
    },
    addData() {
      this.addVisible = true
      this.editId = undefined
      this.editForm = JSON.parse(
        JSON.stringify(this.cloneEditForm),
      )
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    async handleEdit(row) {
      this.editId = row.id
      const l = this.$loading({
        background: 'rgba(0, 0, 0, 0.3)',
      })
      try {
        const res = await getDataById(row.id)
        res.data.domain =
          res.data.domain && res.data.domain.split('.')[0]
        res.data.databaseName =
          res.data.databaseName &&
          res.data.databaseName.split('_')[1]
        this.editForm = res.data
      } catch (e) {
        this.$message.danger(e)
      } finally {
        l.close()
      }
      this.addVisible = true
    },
    async save() {
      try {
        await this.$refs.form.validate()
      } catch {
        return
      }
      const l = this.$loading({
        background: 'rgba(0, 0, 0, 0.3)',
      })
      this.editForm.databaseName =
        'saas_' + this.editForm.databaseName
      this.editForm.domain =
        this.editForm.domain + '.joshine.cn'
      try {
        if (this.editId) {
          const res = await updateManageData(this.editForm)
          if (res.code === 200) {
            this.$message.success(res.message)
            this.getList()
          }
        } else {
          const res = await addManageData(this.editForm)
          if (res.code === 200) {
            this.$message.success(res.message)
            this.getList()
          }
        }
      } catch (e) {
        this.$message.warning(e)
      } finally {
        this.addVisible = false
        l.close()
      }
    },
    async deleteData() {
      if (this.selection.length === 0) {
        this.$message.error('请至少选择一条记录')
        return
      }
      let ids = []
      ids = this.selection.map((item) => item.id)
      ids = ids.join()
      const l = this.$loading({
        background: 'rgba(0, 0, 0, 0.3)',
      })
      try {
        await deleteData(ids)
        this.getList()
      } catch (e) {
        console.error(e)
      } finally {
        l.close()
      }
    },
    handleSelectionChange(selection) {
      this.selection = selection
    },
    onCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getList()
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize
      this.getList()
    },
    rowClick(row) {
      if (this.selection.length === 1 && this.selection[0] === row) {
        this.selection = []
        this.$refs.table.clearSelection()
      } else {
        this.selection = [row]
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(row, true)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.saas-manage {
  height: 100%;
  overflow: hidden;
  display: flex;
  padding: 20px 20px 0px 20px;
  flex-direction: column;

  &::v-deep {
    .el-table .el-table__cell {
      padding: 6px 0;
    }
    .el-input__inner {
      padding: 0 4px;
    }
    .el-input--small .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    .el-icon-time:before {
      content: '';
    }
    .el-dialog__footer {
      text-align: center;

      .el-button--small {
        padding: 9px 50px;
      }
    }
    .el-dialog__body {
      padding: 10px 20px;
    }
    .el-icon-edit:before {
      color: #ff9800;
      font-weight: bold;
    }

    .el-range-editor--small .el-range-separator {
      line-height: 31px;
    }

    .header-row-class-name th {
      background-color: #f8f8f9;
    }
  }
}

.search {
  background: #fff;
}

.table-wrap {
  background: #fff;
  flex: 1;
  overflow: hidden;
}

.pagination {
  text-align: center;
  padding-top: 10px;
}
</style>
