<template>
  <div>
    <div class="header">
      <span>【{{this.projectName}}】提测说明</span>
      <el-button type="primary" size="medium" icon="el-icon-edit" @click="editDetail">编辑</el-button>
    </div>
    <!-- 详情页面展示 -->
    <div v-show='isShowDetail' class="divStyle">
      <el-form label-position="right">
        <el-form-item label="项目名称:">
          <span>{{projectName}}</span>
        </el-form-item>
        <el-form-item label="所属项目:">
          <span>{{jiraProjectName}}</span>
        </el-form-item>
        <el-form-item label="服务与分支:">
          <el-table :data="serviceAndBranch" border style="width:80%">
            <el-table-column label="服务名称" prop="serviceName" width="200px"></el-table-column>
            <el-table-column label="服务分支" prop="branch"></el-table-column>
            <el-table-column label="开发负责人" prop="developer" width="120px"></el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="apollo变更:">
          <el-table :data="apollo" border style="width:80%">
            <el-table-column label="项目名称" prop="projectName"></el-table-column>
            <el-table-column label="apollo Key" prop="key"></el-table-column>
            <el-table-column label="apollo value" prop="value">
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="数据库变更:">
          <el-table :data="database" style="width:80%" border>
            <el-table-column label="数据库名称" prop="db" width="200"></el-table-column>
            <el-table-column label="sql">
              <template slot-scope="scope">
                <pre v-highlight>
                     <code class="lang-sql" v-html="scope.row.sql"></code>
                  </pre>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="需求地址:" style="width:80%">
          <a :href="requirement">{{requirement}}</a>
        </el-form-item>
        <el-form-item label="接口地址:" style="width:80%">
          <a :href="api">{{api}}</a>
        </el-form-item>
        <el-form-item label="备 注:">
          <el-input type="textarea" v-model="scope" style="width:83%" autosize :disabled="true"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- 编辑提测说明 -->
    <div v-show="!isShowDetail" class="divStyle">
      <el-form ref="addTestDescriptionRef" :rules="rules" :model="addTestDescriptionForm" label-width="90px">
        <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:95%">
            <el-table-column label="服务名称" width="250">
              <template slot-scope="scope">
                <el-select v-model="scope.row.serviceName" filterable allow-create placeholder="请选择服务"
                  @change="selectServiceModel(scope.row.serviceName)" clearable style="width:220px">
                  <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="分支名称">
              <template slot-scope="scope">
                <el-select v-model="scope.row.branch" filterable allow-create placeholder="请选择分支" clearable
                  @focus="focusevent(scope.row.serviceName)" style="width:650px">
                  <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="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.developer"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @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:95%">
            <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="220">
              <template slot-scope="scope">
                <el-input v-model.trim="scope.row.key">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="apollo value">
              <template slot-scope="scope">
                <el-input v-model.trim="scope.row.value" type="textarea" :rows="1">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @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:95%">
            <el-table-column label="数据库名称" width="210">
              <template slot-scope="scope">
                <el-select v-model="scope.row.db" placeholder="请选择" filterable clearable allow-create>
                  <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" clearable>
              <template slot-scope="scope">
                <!-- <el-input v-model.trim="scope.row.sql" type="textarea" :row="20">
                </el-input> -->
                <textarea v-model.trim="scope.row.sql" class='text-style' :rows="8"></textarea>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80px">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @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="需求地址:" class="input-style" style="width:95%">
          <el-input v-model="addTestDescriptionForm.requirement"></el-input>
        </el-form-item>
        <el-form-item label="接口地址:" class="input-style" style="width:95%">
          <el-input v-model="addTestDescriptionForm.api"></el-input>
        </el-form-item>
        <el-form-item label="备 注:" class="input-style" style="width:95%">
          <el-input v-model="addTestDescriptionForm.scope" type="textarea" autosize></el-input>
        </el-form-item>
      </el-form>
      <div class="footer" v-show="!isShowDetail">
        <el-button type="primary" size="small" @click="cancelBtn">取 消</el-button>
        <el-button type="primary" size="small" @click="saveTestDescription">确 定</el-button>
      </div>
    </div>

  </div>
</template>
<script>
import {
  detailTestDescription,
  getProjectNameList,
  editTestDescription
} from '@/api/TestDesciption'
import {
  getJiraProjectList,
  getGitProjectList,
  getGitBranchList
} from '@/api/jira'
import { getDataBaseList } from '@/api/effect'
import { mapGetters } from 'vuex'
// 引入组件
// import bus from '@/utils/bus'
export default {
  computed: {
    ...mapGetters({
      // 获取用户名称(可当作全局变量使用)
      getUserName: 'user/chineseName'
    })
  },
  data() {
    return {
      projectName: '',
      jiraProjectName: '',
      requirement: '',
      api: '',
      scope: '',
      apollo: [],
      database: [],
      serviceAndBranch: [],
      url: 'https://element.eleme.io',
      isShowDetail: true,
      addTestDescriptionForm: {
        id: '',
        jiraProjectKey: '',
        projectName: '',
        serviceAndBranch: '',
        apollo: '',
        database: '',
        requirement: '',
        api: '',
        scope: ''
      },
      jiraProjectList: [],
      serviceList: [],
      serviceBranchList: [],
      queryDataBaseList: [],
      serviceAndBranchList: [],
      apolloList: [],
      databaseList: [],
      projectNameList: [],
      rules: {
        jiraProjectKey: [
          {
            required: true,
            message: '请选择项目名称',
            trigger: 'blur'
          }
        ],
        projectName: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getJiraProjectList()
    // 获取所有分支
    this.getServiceList()
    // 获取所有项目
    this.getProjectNameList()
    // 获取所有数据库列表
    this.getDataBaseList()
  },
  activated() {
    detailTestDescription({
      projectName: this.$route.query.projectName,
      jiraProjectKey: this.$route.query.jiraProjectKey
    }).then((resp) => {
      this.isShowDetail = true
      // 将接口信息赋值给详情页面
      var data = resp.data.data
      this.projectName = data.projectName
      this.jiraProjectName = data.jiraProjectName
      this.requirement = data.requirement
      this.api = data.api
      this.scope = data.scope
      this.serviceAndBranch = JSON.parse(data.serviceAndBranch)
      this.apollo = JSON.parse(data.apollo)
      this.database = JSON.parse(data.database)
      this.id = data.id
      this.jiraProjectKey = data.jiraProjectKey
      this.updateTime = data.updateTime
    })
  },
  methods: {
    // 点击编辑按钮
    editDetail() {
      this.isShowDetail = false
      // 赋值给编辑页面
      this.addTestDescriptionForm.id = this.id
      this.addTestDescriptionForm.projectName = this.projectName
      this.addTestDescriptionForm.jiraProjectName = this.jiraProjectName
      this.addTestDescriptionForm.jiraProjectKey = this.jiraProjectKey
      this.addTestDescriptionForm.requirement = this.requirement
      this.addTestDescriptionForm.api = this.api
      this.addTestDescriptionForm.scope = this.scope
      this.serviceAndBranchList = this.serviceAndBranch
      this.apolloList = this.apollo
      this.databaseList = this.database
      this.addTestDescriptionForm.updateTime = this.updateTime
    },
    // 保存方法
    saveTestDescription() {
      // 判断是否选择了重复分支
      for (var a = 0; a < this.serviceAndBranchList.length; a++) {
        for (var b = a + 1; b < this.serviceAndBranchList.length; b++) {
          if (
            this.serviceAndBranchList[a].serviceName ===
            this.serviceAndBranchList[b].serviceName
          ) {
            return this.$message.error(
              '已经选择了已有的分支，请重新选择新分支！'
            )
          }
        }
      }
      // 判断添加的数据库key值是否有重复
      for (var i = 0; i < this.databaseList.length; i++) {
        for (var j = i + 1; j < this.databaseList.length; j++) {
          if (this.databaseList[i].db === this.databaseList[j].db) {
            return this.$message.error(
              '已经选择了已有的数据库，请重新选择数据库！'
            )
          }
        }
      }
      this.$refs.addTestDescriptionRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          // 将数组对象转化为Json字符串
          this.addTestDescriptionForm.serviceAndBranch = JSON.stringify(
            this.serviceAndBranchList
          )
          this.addTestDescriptionForm.apollo = JSON.stringify(this.apolloList)
          this.addTestDescriptionForm.database = JSON.stringify(
            this.databaseList
          )
          console.log('eee', this.addTestDescriptionForm)
          editTestDescription(this.addTestDescriptionForm).then((resp) => {
            if (resp.data.businessCode === '0000') {
              this.$message.success('编辑成功！')
              this.isShowDetail = true
              // 返回列表页
              this.$router.push({ path: `/qa/testDescription` })
              console.log(this.$router)
              // 刷新列表页数据
              this.sendResh()
            } else {
              this.$message.error(resp.data.msg)
            }
          })
        }
      })
    },
    // 刷新列表
    sendResh() {
      // bus使用
      this.$nextTick(function () {
        // DOM 现在更新了
        this.$bus.$emit('refresh')
      })
    },
    // 取消按钮
    cancelBtn() {
      this.isShowDetail = true
    },
    // 获取jira项目列表
    getJiraProjectList() {
      getJiraProjectList().then((resp) => {
        this.jiraProjectList = resp.data.data
      })
    },
    // 获取服务列表
    getServiceList() {
      getGitProjectList().then((resp) => {
        this.serviceList = resp.data.data
      })
    },
    // 选择服务下拉框触发事件
    selectServiceModel(item) {
      getGitBranchList({ projectName: item }).then((resp) => {
        this.serviceBranchList = resp.data.data
      })
    },
    focusevent(name) {
      getGitBranchList({ projectName: name }).then((resp) => {
        this.serviceBranchList = resp.data.data
      })
    },
    // 获取所有项目名称
    getProjectNameList() {
      getProjectNameList().then((resp) => {
        this.projectNameList = resp.data.data
      })
    },
    // 删除服务及分支
    serviceAndBranchDelete(index) {
      this.serviceAndBranchList.splice(index, 1)
    },
    // 添加服务及分支
    addServiceAndBranchRow() {
      this.serviceAndBranchList.push({
        serviceName: '',
        branch: '',
        developer: this.getUserName
      })
    },
    // 添加apollo配置行
    addApolloListRow() {
      this.apolloList.push({
        projectName: '',
        key: '',
        value: ''
      })
    },
    // 删除apollo配置行
    apolloDelete(index) {
      this.apolloList.splice(index, 1)
    },
    // 获取数据库列表信息
    getDataBaseList() {
      getDataBaseList().then((resp) => {
        this.queryDataBaseList = resp.data.data
      })
    },
    // 添加数据库行
    addDatabaseListRow() {
      this.databaseList.push({
        db: '',
        sql: ''
      })
    },
    // 删除数据库
    databaseDelete(index) {
      this.databaseList.splice(index, 1)
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > .el-button {
    margin-right: 80px;
  }
}
.divStyle {
  margin: 20px 0 0 30px;
}
.footer {
  display: flex;
  position: fixed;
  bottom: 0px;
  // width: 80%;
  // justify-content: flex-end;
  right: 90px;
  padding-right: 90px;
  // background-color: rgb(111, 8, 8);
  // background-color: #f1f3f4;
  // left: 0;
  box-sizing: border-box;
}
.text-style {
  width:920px;
  color:-internal-light-dark(#EBEAEA, white);
}
</style>
