<!--
  @description: 维护联系人
  @Modifier: haofengxian
    @routerPath: /informationbase/contactsInfo
  @date: 2020-6-1-13:42
-->
<template>
  <div>
    <div class="title p0-16 clearfix">
      <div class="title-back pointer" @click="back">
        <i class="iconfont icon-fanhui mr10" />维护联系人
      </div>
    </div>
    <div class="p0-16">
      <div class="page-title">
        1. 基本信息
      </div>
      <table class="tableData">
        <tr>
          <td>单位名称</td>
          <td colspan="3">
            {{ formData.departName }}
          </td>
        </tr>
        <tr>
          <td>联系人（管理员）</td>
          <td>{{ formData.linkerName }}</td>
          <td>联系人手机号（管理员）</td>
          <td>{{ formData.mobilePhone }}</td>
        </tr>
      </table>
      <div class="page-title">
        2. 其他联系人
        <el-button type="primary" plain @click="addContact">
          添加联系人
        </el-button>
      </div>
      <div>
        <el-table
          ref="smallTable"
          :data="linkerList"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
          />
          <el-table-column
            prop="linkname"
            label="姓名"
            min-width="160"
          >
            <template slot="header" slot-scope="scope">
              <span class="red-star">*</span>
              <span>姓名</span>
            </template>
            <template slot-scope="scope">
              <el-input v-if="scope.row.state" v-model="scope.row.linkname" />
              <span v-else v-text="scope.row.linkname" />
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="linktel"
            min-width="230"
          >
            <template slot="header" slot-scope="scope">
              <span class="red-star">*</span>
              <span>手机号</span>
            </template>
            <template slot-scope="scope">
              <el-input v-if="scope.row.state" v-model="scope.row.linktel" />
              <span v-else v-text="scope.row.linktel" />
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="email"
            label="邮箱"
            min-width="160"
          >
            <template slot-scope="scope">
              <el-input v-if="scope.row.state" v-model="scope.row.email" />
              <span v-else v-text="scope.row.email" />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <el-link
                v-if="!scope.row.state"
                type="primary"
                @click.stop="editContactsInfo(scope.row,scope.$index,true)"
              >
                [修改]
              </el-link>
              <el-link
                v-else
                type="primary"
                @click="editContactsInfo(scope.row,scope.$index,false)"
              >
                [保存]
              </el-link>
              <el-link
                type="primary"
                @click.stop="deleteContactsInfo(scope.row,scope.$index,)"
              >
                [删除]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
/* 接口*/
import { queryLinkerListByDepartId, saveOrUpdateLinkerInfo, deleteLinkerInfoById } from '@api/common/user'
/* 公用方法*/
import { cloneObject } from '@assets/js/utils'// 常用方法
export default {
  name: 'ContactsInfo',
  data() {
    return {
      departId: this.$route.params.id, // 机构id
      // 基本信息
      formData: {
        departName: '',
        linkerName: '',
        mobilePhone: ''
      },
      // 添加联系人信息
      addLinker: {
        departId: '',
        id: '',
        linkname: '', // 姓名
        linktel: '', // 手机号
        email: '', // 邮箱
        state: true // 设置表格为可编辑状态
      },
      // 联系人列表
      linkerList: []
    }
  },
  created() {
    // 获取列表信息
    this.queryLinkerListByDepartInfo()
  },
  methods: {
    queryLinkerListByDepartInfo() {
      queryLinkerListByDepartId(this.departId).then(res => {
        this.formData = res.data
        if (res.data.linkerVoList) {
          this.linkerList = res.data.linkerVoList
        }
      }).catch(() => {
      })
    },
    // 添加联系人
    addContact() {
      const data = cloneObject(this.addLinker)// 深层拷贝
      this.linkerList.push(data)
    },
    // 修改/保存联系人
    editContactsInfo(row, index, state) {
      if (!state) {
        // 点击保存切换为保存
        row.departId = this.departId
        saveOrUpdateLinkerInfo(row).then(res => {
        }).catch(() => {
        })
      }
      const stateDate = this.linkerList[index]
      stateDate.state = state
      this.linkerList.splice(index, 1, stateDate)
    },
    // 删除
    deleteContactsInfo(row, index) {
      this.$confirm('确认要删除联系人吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        deleteLinkerInfoById(row.id).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.linkerList.splice(index, 1)
          // 获取列表信息
          this.queryLinkerListByDepartInfo()
        })
      })
    },
    // 返回
    back() {
      this.$router.push({
        path: '/informationbase/tendereeInfoList'
      })
    }
  }
}
</script>

<style scoped>

</style>
