<template>
  <div class="company">
    <div class="title">注册方案</div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="公司注册" name="1">
        <el-dialog title="公司注册方案" :visible.sync="companyAddDialog" width="60%" center>
          <companysub />
        </el-dialog>
        <el-dialog title="公司注册方案" :visible.sync="companyDetailDialog" width="60%" center>
            <Companydetail :no="detailsNeedNo" @companyAddDone="closeCompanyAddDialog" />
          </el-dialog>
        
        <div class="company-find">
          <div class="box">
            <div>方案编号：</div>
            <div>
              <el-input v-model="schemeNo" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="box">
            <div>服务单号：</div>
            <div>
              <el-input v-model="serviceNo" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="box">
            <div>公司名称：</div>
            <div>
              <el-input v-model="entName" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="box">
            <div>组织类型：</div>
            <div>
              <el-select v-model="tissue" placeholder="请选择">
                <el-option
                  v-for="item in tissueOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="company-find">
          <div class="box">
            <div>纳税人类型：</div>
            <div>
              <el-select v-model="taxpayer" placeholder="请选择">
                <el-option
                  v-for="item in taxpayerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="box">
            <div>注册城市：</div>
            <div>
              <el-select v-model="city" placeholder="请选择">
                <el-option
                  v-for="item in cityOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="box">
            <div>方案状态：</div>
            <div>
              <el-select v-model="scheme" placeholder="请选择">
                <el-option
                  v-for="item in schemeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="box btn">
            <el-button @click="find">查询</el-button>
            <el-button @click="addCompany">新增</el-button>
          </div>
        </div>
        <div class="companylist">
          <el-table :data="companyData" style="width: 100%">
            <div slot="empty">
              <div class="ndata">
                <img src="@/assets/imgs/fqembed/datanull.png" alt />
              </div>
              <div>很抱歉！暂时没有查询到您搜索到内容～</div>
            </div>
            <el-table-column fixed prop="solutionNo" label="方案编号" width="188"></el-table-column>
            <el-table-column prop="orderNo" label="服务单号" width="188"></el-table-column>
            <el-table-column prop="entName" label="公司名称" width></el-table-column>
            <el-table-column prop="organizationType" label="组织类型" width></el-table-column>
            <el-table-column prop="entNature" label="公司性质" width></el-table-column>
            <el-table-column prop="taxpayerType" label="纳税人类型" width></el-table-column>
            <el-table-column prop="city" label="注册城市" width></el-table-column>
            <el-table-column prop="statusName" label="方案状态">
              <template slot-scope="scope">
                <div class="payment">
                  <div :class="dotColor(scope.row.status)"></div>
                  <div>{{scope.row.statusName}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <div class="handle">
                  <!-- 需要判断当前付款状态是否有作废 -->
                  <span @click="toDetails(scope.$index,scope.row)">详情&nbsp;</span>&nbsp;
                  <span v-show="scope.row.status == 'dqr'">|</span>&nbsp;
                  <span
                    @click="invalid(scope.$index,scope.row)"
                    v-show="scope.row.status == 'dqr'"
                  >&nbsp;作废</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          
        </div>
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage2"
            :page-size="20"
            background
            layout="prev, pager, next, jumper"
            :total="dataCount"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="云上公司注册" name="2">
        <el-dialog title="云上公司注册方案" :visible.sync="cloudCompanyAddDialog" width="60%" center>
          <Cloudcompany @cloudAddDone="closeCloudCompanyAddDialog"></Cloudcompany>
        </el-dialog>
        <el-dialog title="云上公司注册方案" :visible.sync="cloudDetailDialog" width="60%" center>
          <Clouddetails :no="detailsNeedNo"></Clouddetails>>>>>>>> f76e22315d3770da5c3fcd6e691517a2bf887691
        </el-dialog>
        <div class="company-find">
          <div class="box">
            <div>方案编号：</div>
            <div>
              <el-input v-model="cSchemeNo" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="box">
            <div>服务单号：</div>
            <div>
              <el-input v-model="cServiceNo" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="box">
            <div>公司名称：</div>
            <div>
              <el-input v-model="cEntName" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <!-- <div class="box">
            <div>组织类型：</div>
            <div>
              <el-select v-model="tissue" placeholder="请选择">
                <el-option
                  v-for="item in tissueOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>-->
        </div>
        <div class="company-find">
          <div class="box">
            <div>注册园区：</div>
            <div>
              <el-select v-model="regPark" placeholder="请选择">
                <el-option
                  v-for="item in regParkOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="box">
            <div>产品类型：</div>
            <div>
              <el-select v-model="pType" placeholder="请选择">
                <el-option
                  v-for="item in pTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="box">
            <div>方案状态：</div>
            <div>
              <el-select v-model="cScheme" placeholder="请选择">
                <el-option
                  v-for="item in cSchemeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="box btn">
            <el-button @click="find">查询</el-button>
            <el-button @click="addCloudCompany">新增</el-button>
          </div>
        </div>
        <div class="companylist">
          <el-table :data="cloudData" style="width: 100%">
            <div slot="empty">
              <div class="ndata">
                <img src="@/assets/imgs/fqembed/datanull.png" alt />
              </div>
              <div>很抱歉！暂时没有查询到您搜索到内容～</div>
            </div>
            <el-table-column fixed prop="solutionNo" label="方案编号" width></el-table-column>
            <el-table-column prop="orderNo" label="服务单号" width></el-table-column>
            <el-table-column prop="regPark" label="注册园区" width></el-table-column>
            <el-table-column prop="productType" label="产品类型" width></el-table-column>
            <el-table-column prop="regType" label="注册类型" width></el-table-column>
            <el-table-column prop="statusName" label="方案状态" width>
              <template slot-scope="scope">
                <div class="payment">
                  <div :class="dotColor(scope.row.status)"></div>
                  <div>{{scope.row.statusName}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width>
              <template slot-scope="scope">
                <div class="handle">
                  <!-- 需要判断当前付款状态是否有作废 -->
                  <span @click="toDetails(scope.$index,scope.row)">详情&nbsp;</span>&nbsp;
                  <span v-show="scope.row.status == 'dqr'">|</span>&nbsp;
                  <span
                    v-show="scope.row.status == 'dqr'"
                    @click="invalid(scope.$index,scope.row)"
                  >&nbsp;作废</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage2"
            :page-size="20"
            background
            layout="prev, pager, next, jumper"
            :total="dataCount"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Companysub from "./Companysub.vue";
import Cloudcompany from "./Cloudcompany.vue";
import Companydetail from "./Companydetail.vue";
import Clouddetails from "./Clouddetails.vue";
import req from "axios";
export default {
  components: {
    Companysub,
    Cloudcompany,
    Companydetail,
    Clouddetails
  },
  data() {
    return {
      haveChoosedTab: 1, // 选中的Tab标签的名字，来判定详情是显示 公司详情 或 云公司详情
      companyAddDialog: false, // 公司注册对话框
      cloudCompanyAddDialog: false, // 云公司注册对话框
      companyDetailDialog: false, // 公司详情对话框
      cloudDetailDialog: false, // 云公司详情对话框
      activeName: "1",
      schemeNo: "",
      serviceNo: "",
      entName: "",
      tissue: "",
      taxpayer: "",
      city: "",
      tissueOptions: [
        {
          value: "个人独资",
          label: "个人独资"
        },
        {
          value: "合伙企业",
          label: "合伙企业"
        }
      ],
      taxpayerOptions: [
        {
          value: "内资小规模",
          label: "内资小规模"
        },
        {
          value: "内资一般人",
          label: "内资一般人"
        },
        {
          value: "外资小规模",
          label: "外资小规模"
        },
        {
          value: "外资一般人",
          label: "外资一般人"
        },
        {
          value: "合资小规模",
          label: "合资小规模"
        },
        {
          value: "合资一般人",
          label: "合资一般人"
        }
      ],
      cityOptions: [
        {
          value: "北京",
          label: "北京"
        },
        {
          value: "上海",
          label: "上海"
        },
        {
          value: "深圳",
          label: "深圳"
        },
        {
          value: "成都",
          label: "成都"
        },
        {
          value: "杭州",
          label: "杭州"
        },
        {
          value: "广州",
          label: "广州"
        }
      ],
      scheme: "",
      schemeOptions: [
        {
          value: "dqr",
          label: "待确认"
        },
        {
          value: "ywc",
          label: "已完成"
        },
        {
          value: "yzf",
          label: "已作废"
        }
      ],
      companyData: [],
      // 云 *******************
      regParkOptions: [
        {
          value: "上海云上公司",
          label: "上海云上公司"
        },
        {
          value: "东莞云上公司",
          label: "东莞云上公司"
        },
        {
          value: "东营云上公司",
          label: "东营云上公司"
        },
        {
          value: "中山云上公司",
          label: "中山云上公司"
        },
        {
          value: "重庆云上公司",
          label: "重庆云上公司"
        },
        {
          value: "郑州云上公司",
          label: "郑州云上公司"
        },
        {
          value: "贵州云上公司",
          label: "贵州云上公司"
        },
        {
          value: "开封云上公司",
          label: "开封云上公司"
        }
      ],
      regPark: "",
      cSchemeNo: "",
      cServiceNo: "",
      cEntName: "",
      cScheme: "",
      cSchemeOptions: [
        {
          value: "dqr",
          label: "待确认"
        },
        {
          value: "ywc",
          label: "已完成"
        },
        {
          value: "yzf",
          label: "已作废"
        }
      ],
      pType: "",
      pTypeOptions: [
        {
          label: "个体商户注册刻章服务",
          value: "个体商户注册刻章服务"
        },
        {
          label: "内资小规模有限公司",
          value: "内资小规模有限公司"
        },
        {
          label: "内资小规模有限公司注册刻章服务",
          value: "内资小规模有限公司注册刻章服务"
        }
      ],
      currentPage1: 1,
      currentPage2: 1,
      cloudData: [],
      dataCount: 1,
      // 获取详情数据
      detailsData: {},
      baseURL: "",
      detailsNeedNo: ""
    };
  },
  methods: {
    closeCompanyAddDialog(childPassedClose) {
      console.log(childPassedClose);
      this.companyAddDialog = childPassedClose;
    },
    closeCloudCompanyAddDialog(childPassedClose) {
      this.cloudCompanyAddDialog = childPassedClose;
    },
    addCompany() {
      console.log("公司注册--添加--详情--test");
      this.companyAddDialog = true;
    }, // 公司注册添加
    addCloudCompany() {
      console.log("云上公司注册--添加--详情--test");
      this.cloudCompanyAddDialog = true;
      // this.cloudDetailDialog = true;
    }, // 云上公司注册添加
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.name == "1") {
        this.haveChoosedTab = 1;
        console.log("公司注册");
      }
      if (tab.name == "2") {
        this.haveChoosedTab = 2;
        console.log("云上公司注册");
      }
      this.getListData();
    },
  
    toDetails(idx, row) {
      console.log(row, "////////////////////////////");
      this.detailsNeedNo = row.needNo;
      if (this.haveChoosedTab == 1) {
        this.companyDetailDialog = true;
      }
      if (this.haveChoosedTab == 2) {
        this.cloudDetailDialog = true;
      }
    },
    invalid(idx, row) {
      console.log(row);
      req
        .post(
          this.baseURL,
          {
            actionType: "abolishProgramme",
            actionBody: {
              solutionNo: row.solutionNo
            }
          },
          {
            headers: {
              token: "3260d5a2452441dd93ecc7ecb35f6dc0",
              userpin: "7c00bdd9dde04c59a50a0a45788b9a59"
            }
          }
        )
        .then(res => {
          console.log(res.data);
          if (res.data.status == 0) {
            location.reload();
            this.$message("该方案已作废");
          }
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.currentPage2 = val;
      this.getListData();
      console.log(`当前页: ${val}`);
    },
    dotColor(status) {
      switch (status) {
        case 'dqr':
          return `hold`;
          break;
        case 'ywc':
          return `done`;
          break;
        case 'yzf':
          return `cancellation`;
          break;
      }
    },
    getListData() {
      if (this.activeName == "1") {
        req
          .post(
            this.baseURL,
            {
              actionType: "getProgrammeListByUser",
              actionBody: {
                pageIndex: this.currentPage1,
                pageSize: "20",
                needNo: "",
                solutionNo: this.schemeNo || "",
                bizType: "companyreg",
                orderNo: this.serviceNo || "",
                status: this.scheme || "",
                companyName: this.entName || "",
                area: this.city,
                companyCategory: this.taxpayer || "",
                orgType: this.tissue || ""
              }
            },
            {
              headers: {
                token: "3260d5a2452441dd93ecc7ecb35f6dc0",
                userpin: "7c00bdd9dde04c59a50a0a45788b9a59"
              }
            }
          )
          .then(res => {
            console.log(res.data.msg);
            console.log(res.data.data);
            if (res.data.status == 0) {
              let dataList = [];
              let dataItem = {};
              res.data.data.map((item, index) => {
                dataItem.solutionNo = item.solutionNo || "---";
                dataItem.orderNo = item.orderNo || "---";
                dataItem.needNo = item.needNo || "---";
                dataItem.status = item.status || "---";
                dataItem.statusName = item.statusName || "---";
                dataItem.entName =
                  item.solutionContent.solution.companyName || "---";
                dataItem.organizationType =
                  item.solutionContent.solution.orgType || "---";
                dataItem.entNature =
                  item.solutionContent.solution.companyType || "---";
                dataItem.taxpayerType =
                  item.solutionContent.solution.companyCategory || "---";
                dataItem.city = item.solutionContent.solution.area || "---";
                dataList.push(dataItem);
                dataItem = {};
              });
              this.companyData = dataList;
              this.dataCount = res.data.dataCount;
              console.log(res.data, "!!!!!!!!!!!!!!!!!!!");

              console.log(this.companyData);
            }
          });
      } else if (this.activeName == "2") {
        req
          .post(
            this.baseURL,
            {
              actionType: "getProgrammeListByUser",
              actionBody: {
                pageIndex: this.currentPage2,
                pageSize: "20",
                needNo: "",
                solutionNo: this.cSchemeNo || "", //方案编号
                companyName: this.cEntName || "",
                bizType: "companyreg_cloud",
                orderNo: this.cServiceNo || "", //服务单号
                status: this.cScheme || "", //方案状态
                park: this.regPark || "", //注册园区
                productType: this.pType || "" //产品类型
              }
            },
            {
              headers: {
                token: "3260d5a2452441dd93ecc7ecb35f6dc0",
                userpin: "7c00bdd9dde04c59a50a0a45788b9a59"
              }
            }
          )
          .then(res => {
            console.log(res);
            console.log(res.data.data);
            if (res.data.status == 0) {
              let dataList = [];
              let dataItem = {};
              res.data.data.map((item, index) => {
                dataItem.solutionNo = item.solutionNo || "---";
                dataItem.orderNo = item.orderNo || "---";
                dataItem.needNo = item.needNo || "---";
                dataItem.status = item.status || "---";
                dataItem.statusName = item.statusName || "---";
                dataItem.regPark = item.solutionContent.solution.park || "---";
                dataItem.regType =
                  item.solutionContent.solution.registerType || "---";
                dataItem.productType =
                  item.solutionContent.solution.productType || "---";
                dataList.push(dataItem);
                dataItem = {};
              });
              this.cloudData = dataList;
              this.dataCount = res.data.dataCount;
              console.log(this.cloudData);
            }
          });
      }
    },
    find() {
      this.getListData();
    }
  },
  watch: {},
  created() {
    if (process.env.NODE_ENV == "development") {
      //开发环境
      this.baseURL = "/api/web/action/icapi/springBoard";
    } else if (process.env.NODE_ENV == "production") {
      //生产环境
      this.baseURL = "/web/action/icapi/springBoard";
    }
    console.log(JSON.parse(this.$route.query.data));
  },
  mounted() {
    this.getListData();
  }
};
</script>
<style lang="scss" scoped>
.company {
  padding: 30px 22px;
  box-sizing: border-box;
  width: 100%;
  .ndata {
    width: 612px;
    height: 398px;
    margin: 24px auto 0;
    + div {
      margin: 0 auto;
    }
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .el-tabs--card > .el-tabs__header {
    margin: 0;
  }
  > .title {
    height: 28px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 30px;
  }
  .company-find {
    box-sizing: border-box;
    width: 100%;
    margin-top: 30px;
    min-width: 1300px;
    padding: 0 0 0 2.24%;
    .box {
      display: flex;
      width: 284px;
      align-items: center;
      float: left;
      margin-right: 25px;
      > div:nth-child(1) {
        width: 84px;
        height: 36px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        text-align: right;
        line-height: 36px;
      }
      > div:nth-child(2) {
        flex: 1;
        .el-input__inner {
          height: 36px;
        }
      }
      > .el-button {
        width: 80px;
        height: 36px;
        background: rgba(223, 183, 107, 1);
        border-radius: 4px;
        color: white;
      }
      > .el-button:nth-child(2) {
        width: 80px;
        height: 36px;
        background: #4a90e2;
        border-radius: 4px;
        color: white;
      }
    }
    > .btn {
      margin-left: 14px;
    }
    .box:nth-child(4n) {
      margin-right: 0;
    }
    .el-dialog__wrapper {
      .el-dialog {
        .el-dialog__body {
        }
      }
    }
  }
  .company-find::after {
    content: "";
    clear: both;
    display: block;
  }
  .companylist {
    margin-top: 30px;
  }
  .handle {
    > span {
      color: #4a90e2;
    }
    > span:nth-child(2) {
      font-size: 16px;
    }
    > span:not(:nth-child(2)) {
      cursor: pointer;
    }
  }
  .block {
    margin-top: 30px;
    text-align: center;
  }
  .payment {
    display: flex;
    align-items: center;
    justify-content: center;
    .hold {
      display: block;
      width: 6px;
      height: 6px;
      background: rgba(255, 189, 46, 1);
      border-radius: 6px;
      transform: translate(-4px, 1px);
    }
    .done {
      display: block;
      width: 6px;
      height: 6px;
      background: #28ca42;
      border-radius: 6px;
      transform: translate(-4px, 1px);
    }
    .cancellation {
      display: block;
      width: 6px;
      height: 6px;
      background: #000000;
      border-radius: 6px;
      transform: translate(-4px, 1px);
    }
  }
}
</style>