<template>
  <div>
    <el-form ref="addTestDescriptionRef" :rules="rules" :model="addTestDescriptionForm" label-width="88px"
      style="margin-left:25px">
      <el-form-item label="Jira项目:" prop="jiraProjectKey">
        <el-select v-model="addTestDescriptionForm.jiraProjectKey" placeholder="请选择Jira项目" filterable clearable>
          <el-option v-for="item in jiraProjectList" :key="item.key" :label="item.name" :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称:" style="width:400px" prop="projectName">
        <el-input v-model="addTestDescriptionForm.projectName" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <!-- 服务及分支 -->
      <el-form-item label="服务及分支:">
        <el-table :data="serviceAndBranchList" border style="width:90%;margin-top:5px;">
          <el-table-column label="服务" width="310">
            <template slot-scope="scope">
              <el-select v-model="scope.row.serviceName" filterable placeholder="请选择服务"
                @change="selectServiceModel(scope.row.serviceName)" clearable style="width:280px">
                <el-option v-for="item2 in serviceList" :key="item2.name" :label="item2.name" :value="item2.name">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="分支" width="310">
            <template slot-scope="scope">
              <el-select v-model="scope.row.branch" filterable placeholder="请选择分支" clearable
                @focus="focusevent(scope.row.serviceName)" style="width:280px">
                <el-option v-for="item2 in serviceBranchList" :key="item2.name" :label="item2.name" :value="item2.name">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="开发负责人" width="190">
            <template slot-scope="scope">
              <el-input v-model="scope.row.developer"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="serviceAndBranchDelete(scope.$index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" size="mini" plain class="el-icon-circle-plus" style="margin-top:10px"
          @click="addServiceAndBranchRow()">添加行</el-button>
      </el-form-item>
      <!-- apollo变更 -->
      <el-form-item label="apollo变更:">
        <el-table :data="apolloList" border style="width:90%;margin-top:5px;">
          <el-table-column label="项目名称" width="230">
            <template slot-scope="scope">
              <el-select v-model="scope.row.projectName" placeholder="请选择项目" filterable clearable>
                <el-option v-for="item in projectNameList" :key="item.projectName" :label="item.projectName"
                  :value="item.projectName">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="apollo Key" width="290">
            <template slot-scope="scope">
              <el-input v-model="scope.row.key">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="apollo value" width="290">
            <template slot-scope="scope">
              <el-input v-model="scope.row.value">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="apolloDelete(scope.$index)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" size="mini" plain class="el-icon-circle-plus" style="margin-top:10px"
          @click="addApolloListRow()">添加行</el-button>
      </el-form-item>
      <!-- 数据库变更 -->
      <el-form-item label="数据库变更:">
        <el-table :data="databaseList" border style="width:90%;margin-top:5px;">
          <el-table-column label="数据库名称" width="210">
            <template slot-scope="scope">
              <el-select v-model="scope.row.db" placeholder="请选择" filterable clearable>
                <el-option v-for="item in queryDataBaseList" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="sql" width="600px">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.sql" type="textarea" autosize>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="databaseDelete(scope.$index)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" size="mini" plain class="el-icon-circle-plus" style="margin-top:10px"
          @click="addDatabaseListRow()">添加行</el-button>
      </el-form-item>
      <el-form-item label="需求地址:" style="width:91%">
        <el-input v-model="addTestDescriptionForm.requirement"></el-input>
      </el-form-item>
      <el-form-item label="接口地址:" style="width:91%">
        <el-input v-model="addTestDescriptionForm.api"></el-input>
      </el-form-item>
      <el-form-item label="其它:" style="width:91%">
        <el-input v-model="addTestDescriptionForm.scope" type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="DialogAddVisible=false">取 消</el-button>
      <el-button type="primary" @click="addTestDescriptionFrom">确 定</el-button>
    </span>

  </div>
</template>
<script>
import {
  getJiraProjectList,
  getGitProjectList,
  getGitBranchList
} from '@/api/jira'
import {
  addTestDescription,
  editTestDescription,
  getProjectNameList
} from '@/api/TestDesciption'
import { getDataBaseList } from '@/api/effect'
// import bus from '@/utils/bus'
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      // 获取用户名称(可当作全局变量使用)
      getUserName: 'user/chineseName'
    })
  },
  data() {
    return {
      queryModuleInfo: {
        projectName: '',
        jiraProjectKey: '',
        pageNum: 1,
        pageSize: 10
      },
      totalNum: 0,
      DialogAddVisible: false,
      jiraProjectList: [],
      addTestDescriptionForm: {
        id: '',
        jiraProjectKey: '',
        projectName: '',
        serviceAndBranch: '',
        apollo: '',
        database: '',
        requirement: '',
        api: '',
        scope: ''
      },
      rules: {
        jiraProjectKey: [
          {
            required: true,
            message: '请选择项目名称',
            trigger: 'blur'
          }
        ],
        projectName: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }
        ]
      },
      serviceList: [],
      serviceBranchList: [],
      queryDataBaseList: [],
      serviceAndBranchList: [],
      apolloList: [],
      databaseList: [],
      projectNameList: []
    }
  },
  created() {
    this.getJiraProjectList()
    // 获取所有的服务
    this.getServiceList()
    // 获取所有项目
    this.getProjectNameList()
  },
  methods: {
    // 复制模板内容
    // copyTemplate(id) {
    //   let value = this.baseURL + '/xxx/xxx/xxx/xxx/xxx?authorization=&id=' + id
    //   this.copyToClipboard(value) // 需要复制的文本内容
    //   this.$message.success('复制成功，注意带变量字段内容请自行替换！')
    // },
    // 获取jira项目列表
    getJiraProjectList() {
      getJiraProjectList().then((resp) => {
        this.jiraProjectList = resp.data.data
      })
    },
    // 获取服务列表
    getServiceList() {
      getGitProjectList().then((resp) => {
        this.serviceList = resp.data.data
      })
    },
    focusevent(name) {
      getGitBranchList({ projectName: name }).then((resp) => {
        this.serviceBranchList = resp.data.data.data
      })
    },
    // 选择服务下拉框触发事件
    selectServiceModel(item) {
      getGitBranchList({ projectName: item }).then((resp) => {
        this.serviceBranchList = resp.data.data.data
      })
    },
    // 添加服务及分支
    addServiceAndBranchRow() {
      this.serviceAndBranchList.push({
        serviceName: '',
        branch: '',
        developer: this.getUserName
      })
    },
    // 删除服务及分支
    serviceAndBranchDelete(index) {
      this.serviceAndBranchList.splice(index, 1)
    },
    // 添加apollo配置行
    addApolloListRow() {
      this.apolloList.push({
        projectName: '',
        key: '',
        value: ''
      })
    },
    // 删除apollo配置行
    apolloDelete(index) {
      this.apolloList.splice(index, 1)
    },
    // 添加数据库行
    addDatabaseListRow() {
      this.databaseList.push({
        db: '',
        sql: ''
      })
    },
    // 删除数据库
    databaseDelete(index) {
      this.databaseList.splice(index, 1)
    },
    // 获取数据库列表信息
    getDataBaseList() {
      getDataBaseList().then((resp) => {
        this.queryDataBaseList = resp.data.data
      })
    },
    // 保存数据按钮
    addTestDescriptionFrom() {
      // 将数组对象转化为Json字符串
      this.addTestDescriptionForm.serviceAndBranch = JSON.stringify(
        this.serviceAndBranchList
      )
      this.addTestDescriptionForm.apollo = JSON.stringify(this.apolloList)
      this.addTestDescriptionForm.database = JSON.stringify(this.databaseList)
      this.$refs.addTestDescriptionRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          // 编辑测试文档
          if (this.addTestDescriptionForm.id) {
            editTestDescription(this.addTestDescriptionForm).then((resp) => {
              if (resp.data.businessCode === '0000') {
                this.$message.success(resp.data.msg)
                this.DialogAddVisible = false
              } else {
                this.$message.error(resp.data.msg)
              }
            })
          } else {
            // 添加测试文档
            addTestDescription(this.addTestDescriptionForm).then((resp) => {
              if (resp.data.businessCode === '0000') {
                this.$message.success(resp.data.msg)
                this.DialogAddVisible = false
              } else {
                this.$message.error(resp.data.msg)
              }
            })
          }
        }
      })
    },
    // 编辑对话框
    openEditDialog(row) {
      this.DialogAddVisible = true
      this.getDataBaseList()
      this.addTestDescriptionForm.id = row.id
      this.addTestDescriptionForm.projectName = row.projectName
      this.addTestDescriptionForm.jiraProjectKey = row.jiraProjectKey
      this.addTestDescriptionForm.requirement = row.requirement
      this.addTestDescriptionForm.api = row.api
      this.addTestDescriptionForm.scope = row.scope
      this.serviceAndBranchList = JSON.parse(row.serviceAndBranch)
      this.apolloList = JSON.parse(row.apollo)
      this.databaseList = JSON.parse(row.database)
    },
    // 获取所有项目名称
    getProjectNameList() {
      getProjectNameList().then((resp) => {
        console.log('444', resp)
        this.projectNameList = resp.data.data
      })
    }
  }
}
</script>
<style lang="less" scoped>
.btn-style {
  margin-top: 10px;
}
.el-select {
  margin: 0 10px 0 5px;
}
</style>
