<template>
  <div>
    <el-card>
      <div>
        JIRA项目名称:
        <el-select v-model="queryModuleInfo.jiraProjectKey" placeholder="请选择JIRA项目" clearable>
          <el-option v-for="item in jiraProjectList" :key="item.key" :label="item.name" :value="item.key"></el-option>
        </el-select>
        <el-input v-model="queryModuleInfo.projectName" clearable placeholder="请输入项目名称" style="width: 300px;">
        </el-input>
        <el-button type="primary" style="margin-left:10px" icon="el-icon-search" @click="queryData">查询</el-button>
        <el-button type="primary" icon="el-icon-circle-plus" @click="addTestDesc">新增</el-button>
      </div>
      <el-table :data="testDescriptionList" border style="width: 100%;margin-top:20px">
        <el-table-column type='index' width="50px">
          <template slot-scope="scope">
            <span>{{(queryModuleInfo.pageNum -1 ) * queryModuleInfo.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目名" width="200px"></el-table-column>
        <el-table-column label="服务->分支->负责人" width="250px">
          <template slot-scope="scope">
            <div v-for="item in JSON.stringify(scope.row.serviceAndBranch) " :key="item.serviceName">
              <b>{{ item.serviceName }}</b> ->
              {{ item.branch }}<b>{{ item.developer }}</b> -></div>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="serviceAndBranch" label="服务->分支->负责人" width="250px">{{typeof(serviceAndBranch)}}</el-table-column> -->
        <el-table-column prop="apollo" label="Apollo变更" width="250px"></el-table-column>
        <el-table-column prop="database" label="数据库变更" width="300px"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
        <el-table-column label="操作">
          <slot slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit" @click="openPreviewDialog(scope.row)"
              v-permission="('auto:project:edit')">预览</el-button>
            <el-button type="warning" icon="el-icon-edit" @click="openEditDialog(scope.row)"
              v-permission="('auto:project:edit')">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delTestDescription(scope.row)"
              v-permission="('auto:project:del')">删除</el-button>
          </slot>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize"
        layout="total, prev, pager, next" :total="totalNum">
      </el-pagination>
    </el-card>
    <!-- 新增页面 -->
    <el-dialog title="新增提测文档" :visible.sync="DialogAddVisible" width="70%">
      <el-form ref="addTestDescriptionRef" :rules="rules" :model="addTestDescriptionForm" label-width="90px">
        <el-form-item label="jira项目:">
          <el-select v-model="addTestDescriptionForm.jiraProjectKey" placeholder="请选择Jira项目">
            <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">
          <el-input v-model="addTestDescriptionForm.projectName"></el-input>
        </el-form-item>
        <!-- 服务及分支 -->
        <el-form-item label="服务及分支:" style="width:920px">
          <el-row>
            <el-col :span="6">
              <div style="text-align: center">
                服务
              </div>
            </el-col>
            <el-col :span="6">
              <div style="text-align: center">
                分支
              </div>
            </el-col>
            <el-col :span="6">
              <div style="text-align: center">
                开发负责人
              </div>
            </el-col>
            <el-col :span="6">
              <div style="margin-left:20px">
                操作
              </div>
            </el-col>
          </el-row>
          <!-- 操作数据 -->
          <el-row v-for="(item, index) in serviceAndBranchList" :key="index">
            <el-col :span="6">
              <div style="text-align: center;margin-top:5px">
                <el-select v-model="item.serviceName" filterable placeholder="请选择服务"
                  @change="selectServiceModel(item.serviceName)" clearable>
                  <el-option v-for="item2 in serviceList" :key="item2.name" :label="item2.name" :value="item2.name">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="text-align: center;margin-top:5px">
                <el-select v-model="item.branch" filterable placeholder="请选择分支" clearable
                  @focus="focusevent(item.serviceName)">
                  <el-option v-for="item2 in serviceBranchList" :key="item2.name" :label="item2.name"
                    :value="item2.name"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="text-align: center;margin-top:5px">
                <el-input v-model="item.developer"></el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="margin-left:10px;margin-top:5px">
                <el-button size="small" icon="el-icon-delete" @click="serviceAndBranchDelete(index)">删除</el-button>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="addServiceAndBranchRow()"
              class="btn-style">添加</el-button>
          </el-row>
        </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="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.projectName">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="apollo Key" width="240">
              <template slot-scope="scope">
                <el-input v-model="scope.row.key">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="apollo value" width="240">
              <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="200">
              <template slot-scope="scope">
                <el-select v-model="scope.row.db" placeholder="请选择">
                  <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="480">
              <template slot-scope="scope">
                <el-input v-model="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>
    </el-dialog>
  </div>
</template>
<script>
import {
  getJiraProjectList,
  getGitProjectList,
  getGitBranchList
} from '@/api/jira'
import {
  getTestDescriptionList,
  addTestDescription
} from '@/api/TestDesciption'
import { getDataBaseList } from '@/api/effect'
export default {
  data() {
    return {
      queryModuleInfo: {
        projectName: '',
        jiraProjectKey: '',
        pageNum: 1,
        pageSize: 10
      },
      totalNum: 0,
      DialogAddVisible: false,
      testDescriptionList: [],
      jiraProjectList: [],
      addTestDescriptionForm: {
        jiraProjectKey: '',
        projectName: '',
        serviceAndBranch: '',
        apollo: '',
        database: '',
        requirement: '',
        api: '',
        scope: ''
      },
      rules: {
        projectName: [
          {
            required: true,
            message: '项目名称不能为空！',
            trigger: 'blur'
          }
        ]
      },
      serviceList: [],
      serviceBranchList: [],
      queryDataBaseList: [],
      serviceAndBranchList: [
        {
          serviceName: '',
          branch: '',
          developer: ''
        }
      ],
      apolloList: [],
      databaseList: []
    }
  },
  created() {
    this.getJiraProjectList()
    this.getTestDescriptionList()
    // 获取所有的服务
    this.getServiceList()
  },
  methods: {
    // 获取jira项目列表
    getJiraProjectList() {
      getJiraProjectList().then((resp) => {
        this.jiraProjectList = resp.data.data
      })
    },
    // 获取提测文档列表
    getTestDescriptionList() {
      getTestDescriptionList(this.queryModuleInfo).then((resp) => {
        this.testDescriptionList = resp.data.data.list
        console.log('wee', this.testDescriptionList)
        this.totalNum = resp.data.data.total
      })
    },

    queryData() {},
    handleSizeChange(newSize) {
      this.queryModuleInfo.pageSize = newSize
      this.getProjectList()
    },
    handleCurrentChange(newPage) {
      this.queryModuleInfo.pageNum = newPage
      this.getProjectList()
    },
    // 获取服务列表
    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: ''
      })
    },
    // 删除服务及分支
    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
      })
    },
    // 新增按钮
    addTestDesc() {
      this.DialogAddVisible = true
      this.getDataBaseList()
    },
    // 保存数据按钮
    addTestDescriptionFrom() {
      this.addTestDescriptionForm.serviceAndBranch = JSON.stringify(
        this.serviceAndBranchList
      )
      this.addTestDescriptionForm.apollo = JSON.stringify(this.apolloList)
      this.addTestDescriptionForm.database = JSON.stringify(this.databaseList)
      console.log('555', this.addTestDescriptionForm)
      addTestDescription(this.addTestDescriptionForm).then((resp) => {
        if (resp.data.businessCode === '0000') {
          this.$message.success(resp.data.msg)
          this.DialogAddVisible = false
          this.getTestDescriptionList()
        } else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    // 预览对话框
    openPreviewDialog() {},
    // 编辑对话框
    openEditDialog() {},
    // 删除信息
    delTestDescription() {}
  }
}
</script>
<style lang="less" scoped>
.btn-style {
  margin-top: 10px;
  margin-left: 8px;
}
</style>
